Заставить кнопку идти на полную ширину?


276

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

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

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


2
Какой столбец? Где находится CSS?
JJJ

Так что я использую Twitter-bootstrap
user1438003

1
Ты пробовал style="width:100%"? Или положить это в одном из ваших классов?
Ли Тейлор

2
Это может быть потому, что у него есть поле или у столбца есть отступы.
Охад

4
btn-blockКласс работает для меня , как вы ожидаете в BS3
fguillen

Ответы:


826

Bootstrap v3 и v4

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

Bootstrap v2

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


13
Для групп кнопок вам нужно добавить btn-blockтакже в btn-groupоболочку.
Джесси

1
тестировал с начальной загрузкой V3 и "btn-block" работал для меня
Буддика Алвис

Я использую тот же , но оленья кожа расширения <DIV класс = "БТН-группы"> <Кнопка ID = класс "btnSearch" = "БТН-блок"> Поиск </ Button> </ DIV>
Samra

Ура, приятель! это должен быть ответ
Николай

39

Почему бы не использовать предопределенный класс Bootstrap, 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's join both for BS# :) -->
<a href="#" class="btn input-block-level form-control">Full-Width Button</a>

Узнайте больше здесь в разделе Control Sizing ^ Sizing.


2
@fguillen Больше не пользуюсь BS, но попробуй form-controlкласс. Похоже, что в образцах все получается на 100%.
CodeAngry

@CodeAngry просто любопытно, почему вы больше не используете BS (помимо возможного гнева кода;)?
К. Килиан Линдберг

2
@CarlLindberg Я катал свой собственный! БС хорош для быстрого оборота, но ... не выделяется.
CodeAngry

1
@CodeAngry, это круто, что вы прокатили свой собственный фреймворк - но, может быть, стоит использовать тематический ролик - в любом случае, подпирайте дела сами!
Коди

Начиная с bs4, ответ @Layke кажется более актуальным и охватывает bs 2, 3 и 4. Ни один из приведенных выше вариантов не помог мне на bs4. Приносим извинения за то, что поговорили с этим, но принятый ответ не кажется хорошей идеей, и этот кажется устаревшим.
JL Peyret

26

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

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

1
Это способ сделать это с помощью btn-lg. форма-контроль не работает.
Марк Свардстрем

14

Bootstrap 4.1+

использование col-12, btn-block, w-100илиform-control

<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">
             class="col-12"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-primary w-100">
             class="w-100"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-secondary btn-block">
             class="btn-block"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success form-control">
             class="form-control"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-danger" style="width:100%">
             style="width:100%"
         </button>
     </div>
</div>


12

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

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

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

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


1
Вопрос был о кнопках, а не о btn-groups, есть более приемлемый ответ, относящийся к btn-blockклассу от Layke.
Ганс

9

Вы должны добавить эти стили на лист 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%, что вы хотите, но я думаю, что это поможет вам.


Я исправил опечатку в моем коде, должен был быть div вместо span в верхней записи css. Можете ли вы подтвердить, что стили применяются? Изменяется ли ширина кнопки вообще?
Кенни Баня

6
btn-blockэто атрибут, который спас меня! Вытаскивал мои волосы .. Теперь я возвращаюсь и ищу twitter.github.io/bootstrap/base-css.html#buttons , этот атрибут был задокументирован там - doh;)
GONeale

6

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

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

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


5
<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.


1

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.