Come ottenere gruppi di pulsanti che coprono l'intera larghezza di un genitore in Bootstrap?

Question

In Bootstrap, come posso ottenere un gruppo di pulsanti come il seguente che copre l'intera larghezza di un elemento padre? (Come con la classe ".btn-block", ma applicato ad un gruppo 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 può farlo.

.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

È anche possibile utilizzare .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

soluzione corretta per Bootstrap 4 (dalla documentazione di migrazione):

Rimosso .btn-gruppo-giustificata. Come ricambio è possibile utilizzare <div class="btn-group d-flex" role="group"></div> come wrapper attorno agli elementi con .w-100.

Fonte: https://getbootstrap.com/docs/4.0/migration/#button-group

Answer 4

In Bootstrap 4, fanno uso di .d-flex sul .btn-group e .w-100 sui singoli pulsanti:

.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