web-dev-qa-db-ja.com

Bootstrap v4でボタンを揃える

Bootstrap v4は.btn-group-justifiedクラスをドロップします。 https://github.com/twbs/bootstrap/issues/17631 を参照してください

ボタンを正当化する方法：

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>
cssbootstrap-4twitter-bootstrap-4
31
Bass Jobsen

実際、nav-justifyクラスがありません。現時点では、TB3のコードに基づいて自分で追加できます。

SCSSコード

// Justified button groups
// ----------------------

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  .btn,
  .btn-group {
    float: none;
    display: table-cell;
    width: 1%;
    .btn {
      width: 100%;
    }
    .dropdown-menu {
      left: auto;
    }
  }
}

コンパイルされたCSSコード

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate; }
  .btn-group-justified .btn,
  .btn-group-justified .btn-group {
    float: none;
    display: table-cell;
    width: 1%; }
    .btn-group-justified .btn .btn,
    .btn-group-justified .btn-group .btn {
      width: 100%; }
    .btn-group-justified .btn .dropdown-menu,
    .btn-group-justified .btn-group .dropdown-menu {
      left: auto; }

HTML

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>

上記のHTMLコードは、下の図に示すようになります。

enter image description here

境界線の処理

  • ボタンを正当化するために使用される特定のHTMLおよびCSS（つまりdisplay: table-cell）により、それらの間の境界線は2倍になります。通常のボタングループでは、margin-left: -1pxを使用して境界線を削除する代わりにスタックします。ただし、marginはdisplay: table-cellでは機能しません。そのため、Bootstrapのカスタマイズに応じて、境界線を削除するか、色を変更することをお勧めします。

ボタンとして機能するリンク

  • <a>要素がボタンとして機能するために使用されている場合（現在のページ内の別のドキュメントまたはセクションに移動するのではなく、ページ内機能をトリガーする場合）、適切なrole="button"も与えられます。

ドロップダウン

ドロップダウンボタンには次のHTMLコードを使用します。

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
   <a class="btn btn-secondary" href="#" role="button">Left</a>
   <a class="btn btn-secondary" href="#" role="button">Middle</a>
    <div class="btn-group">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </div>
 </div>

ドロップダウンボタンのある正当化されたボタングループは、次の図に示すようになります。

enter image description here

<button>要素を使用

  • <button>要素で両端揃えのボタングループを使用するには、ボタングループで各ボタンをラップする必要があります。ほとんどのブラウザは<button>要素に正当化するためにCSSを適切に適用しませんが、ボタンのドロップダウンをサポートしているため、それを回避できます。

HTML

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Left</button>
   </div>
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Middle</button>
   </div>
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Right</button>
  </div>
 </div>

<button>要素でボタングループを正当化するために使用される上記のHTMLコードは、下の図に示すようになります。

enter image description here

22
Bass Jobsen

Bootstrap 4 Betaがリリースされた後にこれを見つける人のために...

<div class="btn-group d-flex" role="group">
   <a href="" class="btn btn-secondary w-100">Previous</a>
   <a href="" class="btn btn-secondary w-100">Next</a>
</div>
62
Chris Baswell

Bass Jobsenの優れた答え に基づいて、ここでflexboxの代わりにdisplay: table;

SCSSコード

// Justified button groups
// ----------------------

.btn-group-justified {
  display: flex;
  width: 100%;
  .btn,
  .btn-group {
    flex: 1;
    .btn {
      width: 100%;
    }
    .dropdown-menu {
      left: auto;
    }
  }
}

HTML

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>

ドロップダウン、HTMLリンクなどの使用法の詳細については、 Bass Jobsenの回答 を参照してください。

21
Philip Stanislaus

class="dropdown-menu"をBootstrap V4.0、上記のChris Baswellのソリューションに基づいて、およびBootstrap Documentation： https：/ /getbootstrap.com/docs/4.0/components/button-group/#nesting

<div class="btn-group d-flex" role="group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <div class="btn-group w-100" role="group">
        <button type="button" class="btn btn-secondary dropdown-toggle-no-carret w-100" title="MANAGE ENTRIES" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Drop Down
        </button>
        <div class="dropdown-menu">
            <a href="" class="btn btn-secondary w-100">Previous</a>
            <a href="" class="btn btn-secondary w-100">Next</a>
        </div>
    </div>
</div>
0
KingofDendroar