Jak uzyskać grupy przycisków, które obejmują całą szerokość elementu nadrzędnego w programie Bootstrap?

Question

W Bootstrap, w jaki sposób mogę uzyskać grupę przycisków podobną do następującej, która obejmuje całą szerokość elementu nadrzędnego? (Tak jak w klasie ".btn bloku", lecz stosuje się do grupy http://getbootstrap.com/css/#buttons-sizes)

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

Answer 1

flexbox może zrobić.

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

Answer 2

Można również użyć .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>

Answer 3

Prawidłowe rozwiązanie Bootstrap 4 (z dokumentacji migracji)

Usunięto .btn grupami wyrównywane. Jako zamiennik możesz użyć <div class="btn-group d-flex" role="group"></div> jako opakowania wokół elementów z .w-100.

Źródło: https://getbootstrap.com/docs/4.0/migration/#button-group

Answer 4

W Bootstrap 4, wykorzystanie .d-flex na .btn-group i .w-100 na poszczególnych przycisków:

.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') 
     | ••• 
    .dropdown-menu 
     a.dropdown-item(href='#') An option 
     a.dropdown-item(href='#') Another option