it-swarm.com.ru

Как я могу увеличить размер кнопки начальной загрузки?

Например, я сделал свою кнопку

<div class="btn btn-default">
  Active
</div>

и это выглядит следующим образом

 enter image description here

Однако я бы хотел, чтобы моя кнопка была такой

 enter image description here

Как увеличить ширину кнопки начальной загрузки независимо от размера текста?

18
Alexander Shmatko

Вы можете попробовать использовать классы btn-sm, btn-xs и btn-lg следующим образом:

.btn-xl {
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px;
}

JSFIDDLE DEMO

Вы можете использовать Bootstrap .btn-group-justified css класс. Или вы можете просто добавить:

.btn-xl {
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px;
    width:50%;    //Specify your width here
}

JSFIDDLE DEMO

16
Rahul Tripathi

самозагрузка идет с clas btn-lg http://getbootstrap.com/components/#btn-dropdowns-sizing

<div class="btn btn-default btn-block">
  Active
</div>

но если вы хотите иметь кнопку ширины вашего столбца/контейнера, добавьте btn-block

<div class="btn btn-default btn-lg">
      Active
    </div>

Тем не менее, это увеличится до 100%, поэтому сделайте так, чтобы вы завернули свою кнопку в определенное количество столбцов, например. тогда вы знаете, что всегда остается 3 столбца, пока экран хз

<div class="col-sm-3">
             <div class="btn btn-default btn-block">
          Active
            </div>
        </div>
9
Daniel
you can add css property for button size as follow

.btn{min-width:250px;}
7
Navtosh Adhikari

Классы размера начальной загрузки по умолчанию

Вы можете использовать классы btn-lg, btn-sm и btn-xs для управления его размером.

btn-block

Также есть класс btn-block, который расширит вашу кнопку на весь блок. Это очень удобно в сочетании с сеткой Bootstrap.
Например, этот код покажет кнопку с шириной, равной половине экрана для средних и больших экранов; и покажет кнопку полной ширины для маленьких экранов:

<div class="container">
    <div class="col-xs-12 col-xs-offset-0 col-sm-offset-3 col-sm-6">
        <button class="btn btn-group">Click me!</button>
    </div>
</div>

Проверьте это JSFiddle out. Попробуйте изменить размер кадра.

Если этого недостаточно, вы можете легко создать свой собственный класс.

4
Yeldar Kurmangaliyev

Используйте кнопки уровня блока, которые охватывают всю ширину родительского элемента Вы можете добиться этого, добавив btn-block класс вашего элемента кнопки.

Документация здесь

1
Navas Basheer