Зробити кнопку на повну ширину?

276

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

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

Як зробити кнопку такою широкою, як стовпчик?

— користувач1438003
джерело

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" працював на мене

— Buddhika Alwis

я використовую те саме, але не розширює <div class = "btn-group"> <button id = "btnSearch" class = "btn-block"> Пошук </button> </div>

— Самра

Будьмо, друже! це повинна бути відповідь

— Микола

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>

Дізнайтеся більше тут, у розділі Керування розмірами ^ .

— CodeAngry
джерело

2

@fguillen Більше не використовує BS, але спробуйте form-control. Схоже, це робить речі на 100% ширшими у зразках.

— CodeAngry

@CodeAngry просто цікаво, а чому ви більше не використовуєте BS (крім можливого гніву коду;)?

— К. Кіліан Ліндберг

2

@CarlLindberg Я прокатав свою! BS хороший для швидкого повороту, але ... він не виділяється.

— 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. форма-контроль не працює.

— Mark Swardstrom

14

Завантажувальний пристрій 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>, а не <кнопки>.

див .: http://getbootstrap.com/components/#btn-groups-justified

— ніель
джерело

1

Питання btn-groupстосувалося кнопок не s, є більш прийнята відповідь, що стосується 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% впевнений, що ви хочете, але думаю, що це зблизить вас.

— Кенні Банія
джерело

Я виправив помилку друку у своєму коді, мав бути розділеним, а не прольотом у верхньому записі 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
джерело