Как получить группы кнопок, которые охватывают всю ширину родителя в Bootstrap?

В Bootstrap, как я могу получить группу кнопок, такую как следующие, которые охватывают всю ширину родительского элемента? (Например, с классом ".btn-блок", но применительно к группе http://getbootstrap.com/css/#buttons-sizes)Как получить группы кнопок, которые охватывают всю ширину родителя в Bootstrap?

<div class="btn-group" role="group" aria-label="..."> 
    <button type="button" class="btn btn-default">Left</button> 
    <button type="button" class="btn btn-default">Middle</button> 
    <button type="button" class="btn btn-default">Right</button> 
</div>

источник

2016-05-12 Max

Возможно, это [Обоснованная кнопка группа] (https: // getbootstrap. com/components/# btn-groups-justified) – vanburen

Flexbox может сделать это.

.btn-group.special { 
 
    display: flex; 
 
} 
 

 
.special .btn { 
 
    flex: 1 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="btn-group special" role="group" aria-label="..."> 
 
    <button type="button" class="btn btn-default">Left</button> 
 
    <button type="button" class="btn btn-default">Middle</button> 
 
    <button type="button" class="btn btn-default">Right</button> 
 
</div>

источник

2016-05-12 14:54:20

лучший способ использования –

https://stackoverflow.com/a/45969088/6661239 Это работает без изменения CSS – Stranger26

Я бы поднял t его дважды, если можно; это работает как шарм – lgants

Вы также можете использовать .btn-group-justified.

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

 
<div class="container"> 
 
    <div class="btn-group btn-group-justified"> 
 
    <a href="button" class="btn btn-default">Left</a> 
 
    <a href="button" class="btn btn-default">Middle</a> 
 
    <a href="button" class="btn btn-default">Right</a> 
 
    </div> 
 
</div>

источник

2016-05-12 15:10:18 mhatch

Правильное решение для Bootstrap 4 (от миграционной документации):

Удалены .btn-группы с выравниванием. В качестве замены вы можете использовать <div class="btn-group d-flex" role="group"></div> в качестве обертки вокруг элементов с .w-100.

Источник: https://getbootstrap.com/docs/4.0/migration/#button-group

источник

2018-02-08 20:15:21

В Bootstrap 4, использовать .d-flex на ваш .btn-group и .w-100 на отдельных кнопках:

.btn-group.d-flex(role='group') 
    button.w-100.btn.btn-lg.btn-success(type='button') 
    button.w-100.btn.btn-lg.btn-danger(type='button') 
    .btn-group(role='group') 
    button#btnGroupDrop1.btn.btn-lg.btn-light.dropdown-toggle(type='button', data-toggle='dropdown') 
     | &#8226;&#8226;&#8226; 
    .dropdown-menu 
     a.dropdown-item(href='#') An option 
     a.dropdown-item(href='#') Another option

источник

2018-03-02 23:07:14

Как получить группы кнопок, которые охватывают всю ширину родителя в Bootstrap?

ответ

Смежные вопросы