通過按鈕組容器把一組按鈕放在同一行里。通過與按鈕插件聯(lián)合使用，可以設(shè)置為單選框或多選框的樣式和行為。

按鈕組中的工具提示和彈出框需要特別的設(shè)置

當為 .btn-group 中的元素應(yīng)用工具提示或彈出框時，必須指定 container: 'body' 選項，這樣可以避免不必要的副作用（例如工具提示或彈出框觸發(fā)時，會讓頁面元素變寬和/或失去圓角）。 確保設(shè)置正確的 role 屬性并提供一個 label 標簽 為了向使用輔助技術(shù) - 如屏幕閱讀器 - 的用戶正確傳達一正確的按鈕分組，需要提供一個合適的 role 屬性。對于按鈕組合，應(yīng)該是 role="group"，對于 toolbar（工具欄）應(yīng)該是 role="toolbar"。

一個例外是按鈕組合只包含一個單一的控制元素或一個下拉菜單（比如實際情況，<button> 元素組成的兩端對齊排列的按鈕組 ）或下拉菜單。

此外，按鈕組和工具欄應(yīng)給定一個明確的 label 標簽，盡管設(shè)置了正確的 role 屬性，但是大多數(shù)輔助技術(shù)將不會正確的識讀他們。在這里提供的實例中，我們使用 aria-label，但是， aria-labelledby 也可以使用。

按鈕工具欄

把一組 <div class="btn-group"> 組合進一個 <div class="btn-toolbar"> 中就可以做成更復(fù)雜的組件。

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

尺寸

只要給 .btn-group 加上 .btn-group-* 類，就省去為按鈕組中的每個按鈕都賦予尺寸類了，如果包含了多個按鈕組時也適用。

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

嵌套

想要把下拉菜單混合到一系列按鈕中，只須把 .btn-group 放入另一個 .btn-group 中。

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

垂直排列

讓一組按鈕垂直堆疊排列顯示而不是水平排列。分列式按鈕下拉菜單不支持這種方式。

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

兩端對齊排列的按鈕組

讓一組按鈕拉長為相同的尺寸，填滿父元素的寬度。對于按鈕組中的按鈕式下拉菜單也同樣適用。

關(guān)于邊框的處理

由于對兩端對齊的按鈕組使用了特定的 HTML 和 CSS （即 display: table-cell），兩個按鈕之間的邊框疊加在了一起。在普通的按鈕組中，margin-left: -1px 用于將邊框重疊，而沒有刪除任何一個按鈕的邊框。然而，margin 屬性不支持 display: table-cell。因此，根據(jù)你對 Bootstrap 的定制，你可以刪除或重新為按鈕的邊框設(shè)置顏色。

IE8 和邊框

Internet Explorer 8 不支持在兩端對齊的按鈕組中繪制邊框，無論是 <a> 或 <button> 元素。為了照顧 IE8，把每個按鈕放入另一個 .btn-group 中即可。

參見 #12476 獲取詳細信息。

關(guān)于 <a> 元素

只須將一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

關(guān)于 <button> 元素

為了將 <button> 元素用于兩端對齊的按鈕組中，必須將每個按鈕包裹進一個按鈕組中。大部分的瀏覽器不能將我們的 CSS 應(yīng)用到對齊的 <button> 元素上，但是，由于我們支持按鈕式下拉菜單，我們可以解決這個問題。

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