Сделать кнопку go-full-width?

Я хочу, чтобы кнопка занимала всю ширину столбца, но с трудностями...

<div class="span9 btn-block">
    <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>

Как сделать кнопку такой же шириной, как колонка?

Ответы

Ответ 1

Bootstrap v3 и v4

Используйте btn-block для вашей кнопки/элемента

Bootstrap v2

Используйте класс input-block-level вашей кнопки/элемента

Ответ 2

Почему бы не использовать заданный класс Boottrap input-block-level, который выполняет задание?

<a href="#" class="btn input-block-level">Full-Width Button</a> <!-- BS2 -->
<a href="#" class="btn form-control">Full-Width Button</a> <!-- BS3 -->

<!-- And let join both for BS# :) -->
<a href="#" class="btn input-block-level form-control">Full-Width Button</a>

Подробнее здесь, в разделе "Размер контроля" .

Ответ 3

Я просто использовал это:

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>

Ответ 4

использование

<div class="btn-group btn-group-justified">
  ...
</div>

но это работает только для элементов <a>, а не для элементов <button>.

см. http://getbootstrap.com/components/#btn-groups-jusified

Ответ 5

Вы должны добавить эти стили в лист CSS

div .no-padding {
  padding:0;
}

button .full-width{
  width:100%;
  //display:block; //only if you're having issues
}

Затем измените добавление классов в код

<div class="span9 btn-block no-padding">
    <button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>

Я не тестировал это, и я не уверен на 100%, что вы хотите, но я думаю, что это приблизит вас.

Ответ 6

Bootstrap 4.1.3

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success col-12">
             Full Width Button
         </button>
     </div>
</div>

Ответ 7

Я бы подумал, что это будет самый способ загрузки:

<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>

Все, что я делаю, это добавить класс col-xs-12 к кнопке.

Ответ 8

<div class="col-md-9">
    <button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>

В Bootstrap 3 это должно быть все, что вам нужно. Я считаю, что btn-large перекрывал ширину btn-block.

Ответ 9

Ширина кнопки определяется текстом кнопки. Поэтому, если вы хотите определить ширину кнопки, вы можете использовать определенную ширину, используя пиксель в css, или если вы хотите, чтобы отклики использовали процентное значение.