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

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

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

и выглядит так:

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

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

Ответ 1

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

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

JSFIDDLE DEMO

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

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

JSFIDDLE DEMO

Ответ 2

bootstrap поставляется с 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 столбца, пока не появится экран xs

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

Ответ 3

you can add css property for button size as follow

.btn{min-width:250px;}

Ответ 4

По умолчанию классы размера Bootstrap

Вы можете использовать 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. Попробуйте изменить размер рамки.

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

Ответ 5

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

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