Hoe krijg ik knopgroepen die de volledige breedte van een ouder beslaan in Bootstrap?

Hoe kan ik in Bootstrap een knopgroep zoals de volgende krijgen die de volledige breedte van een bovenliggend element beslaat? (zoals bij de klasse “.btn-block”, maar toegepast op een groep 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>

Antwoord 1, autoriteit 100%

Correcte oplossing voor Bootstrap 4 en Bootstrap 5(uit Bootstrap 4-migratiedocumentatie):

Verwijderd .btn-group-justified. Als vervanging kunt u <div class="btn-group d-flex" role="group"></div>gebruiken als wrapper rond elementen met .w-100.

Voorbeeld:

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

Bron: https://getbootstrap.com/docs/4.0/migration/# knopgroep

Bewerken: geverifieerde oplossing met Bootstrap 5

Antwoord 2, autoriteit 92%

Flexbox kan dat.

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

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

.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