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

276

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

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

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

— user1438003
источник

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класс на вашей кнопке / элементе

— Layke
источник

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.

— CodeAngry
источник

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>

Развернуть фрагмент

— Wasif
источник

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.

— kim3er
источник

1

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

— skoepp
источник