How to get button groups that span the full width

问题:

In Bootstrap, how can I get a button group like the following that span the full width of a parent element? (like with the ".btn-block" class, but applied to a group 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>

回答1:

Flexbox can do that.

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

回答2:

Correct solution for Bootstrap 4 (from its migration documentation):

Removed .btn-group-justified. As a replacement you can use <div class="btn-group d-flex" role="group"></div> as a wrapper around elements with .w-100.

Example:

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

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

回答3:

In Bootstrap 4, make use of .d-flex on your .btn-group and .w-100 on individual buttons:

.btn-group.d-flex(role='group')
  button.w-100.btn.btn-lg.btn-success(type='button')