web-dev-qa-db-ja.com

Bootstrapで親の幅全体に広がるボタングループを取得するにはどうすればよいですか？

Bootstrapでは、親要素の幅全体に広がる次のようなボタングループを取得するにはどうすればよいですか？ （「.btn-block」クラスと同様ですが、グループに適用されます 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>
htmlcsstwitter-bootstrapclassbuttongroup
27
Max

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

Bootstrap 4の正しいソリューション（移行ドキュメントより）：

.btn-group-justifiedを削除しました。代替として、<div class="btn-group d-flex" role="group"></div>を.w-100の要素のラッパーとして使用できます。

例：

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

ソース： https://getbootstrap.com/docs/4.0/migration/#button-group

48
Diego P. Steiner

In 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
5
Ryan Brodie

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