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

Question

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

198

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

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

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

user1438003 21 авг. 2012, в 18:28

Источник

2

Какой столбец? Где CSS?
JJJ 21 авг. 2012, в 18:48
0

Поэтому я использую Twitter-бутстрап
user1438003 21 авг. 2012, в 18:49
1

Вы пробовали style="width:100%" ? Или положить это в одном из ваших классов?
Lee Taylor 21 авг. 2012, в 18:49
0

Lee: Спасибо, это почти сработало. Это конечно сделало это намного большим, но все еще не занимая всю колонку.
user1438003 21 авг. 2012, в 18:50
2

Это может быть потому, что у него есть поле или у столбца есть отступы.
Ohad 21 авг. 2012, в 18:51
2

Класс btn-block работает для меня, как вы ожидаете в BS3
fguillen 16 окт. 2013, в 14:08
2

Не могли бы вы отметить ответ CodeAngry или Layke как правильный, поскольку "width: 100%" - это грязный хак, а не правильное решение ...
Sych 01 фев. 2015, в 15:21
1

Я согласен с Sych, ответ Layke является более полным, потому что он охватывает Bootstrap v2 и v3.
Craig London 10 март 2015, в 14:02

Показать ещё 6 комментариев

Теги:

twitter-bootstrap

html

css

responsive-design

8 ответов

Ещё вопросы

Поэтому я использую Twitter-бутстрап
Вы пробовали style="width:100%" ? Или положить это в одном из ваших классов?
Lee: Спасибо, это почти сработало. Это конечно сделало это намного большим, но все еще не занимая всю колонку.
Это может быть потому, что у него есть поле или у столбца есть отступы.
Класс btn-block работает для меня, как вы ожидаете в BS3
Не могли бы вы отметить ответ CodeAngry или Layke как правильный, поскольку "width: 100%" - это грязный хак, а не правильное решение ...
Я согласен с Sych, ответ Layke является более полным, потому что он охватывает Bootstrap v2 и v3.

Layke · Answer 1 · 2013-11-04T22-44-00.000Z

Bootstrap v2

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

Bootstrap v3 и v4

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

Для групп кнопок вам также необходимо добавить btn-block в btn-group .
тестировал с бутстрапом V3 и у меня работал "btn-block"
я использую то же самое, но не раскрываю <div class = "btn-group"> <button id = "btnSearch" class = "btn-block"> Поиск </ button> </ div>
загрузчик v4. альфа 6. btn-block делает btn-block дело!
Ура, приятель! это должен быть ответ
@ user1438003 не забудьте пометить правильные ответы

CodeAngry · Answer 2 · 2013-07-17T01-36-00.000Z

36

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

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

CodeAngry 17 июль 2013, в 01:36

4

Не знаю, как заставить это работать в BS 3.0
fguillen 16 окт. 2013, в 14:04
2

@fguillen Больше не использую BS, но попробуйте form-control . Похоже, что делает образцы 100% шириной в образцах.
CodeAngry 16 окт. 2013, в 18:11
0

@CodeAngry просто любопытно, почему вы больше не используете BS (помимо возможного гнева кода;)?
K. Kilian Lindberg 13 дек. 2013, в 17:57
2

@CarlLindberg Я катал свой собственный! БС хорош для быстрого оборота, но ... не выделяется.
CodeAngry 14 дек. 2013, в 01:18
1

@CodeAngry, это круто, что вы катали свой собственный фреймворк - но, возможно, стоит использовать тематический ролик - в любом случае, подпирайте дела сами!
Cody 17 апр. 2015, в 22:09
0

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

Показать ещё 4 комментария

noel · Answer 3 · 2013-12-13T15-44-00.000Z

использовать

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

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

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

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

syn · Answer 4 · 2014-06-23T07-23-00.000Z

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

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

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

Kenny Bania · Answer 5 · 2012-08-21T19-57-00.000Z

Вы должны добавить эти стили в лист 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. Можете ли вы подтвердить, что стили применяются? Изменяется ли ширина кнопки вообще?
btn-block - это атрибут, который спас меня! Вытаскивал мои волосы .. Теперь я возвращаюсь и ищу twitter.github.io/bootstrap/base-css.html#buttons , этот атрибут был задокументирован там - дох;)

Starkers · Answer 6 · 2014-04-03T14-26-00.000Z

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

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

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

kim3er · Answer 7 · 2014-03-06T13-24-00.000Z

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

skoepp · Answer 8 · 2012-08-24T12-24-00.000Z

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