Bootstrap 4 按鈕組
按鈕組
Bootstrap 4 允許您將一系列按鈕組合在一起（在一行上）形成一個按鈕組
使用帶有類 .btn-group 的 <div> 元素來建立按鈕組。
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
自己動手試一試 »
提示：與其為組中的每個按鈕應用按鈕大小，不如使用類 .btn-group-lg 來建立大型按鈕組，或使用 .btn-group-sm 來建立小型按鈕組
大型按鈕
預設按鈕
小型按鈕
示例
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
自己動手試一試 »
垂直按鈕組
Bootstrap 4 也支援垂直按鈕組
使用類 .btn-group-vertical 來建立垂直按鈕組。
示例
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
自己動手試一試 »
巢狀按鈕組和下拉選單
巢狀按鈕組以建立下拉選單（您將在後面的章節中瞭解更多關於下拉選單的資訊）
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">平板電腦</a>
<a class="dropdown-item" href="#">智慧手機</a>
</div>
</div>
</div>
自己動手試一試 »
拆分按鈕下拉選單
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
自己動手試一試 »
垂直按鈕組帶下拉選單
示例
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">平板電腦</a>
<a class="dropdown-item" href="#">智慧手機</a>
</div>
</div>
</div>
自己動手試一試 »
按鈕組並排顯示
按鈕組預設是“內聯”的，這使得它們在有多個組時可以並排顯示
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>
自己動手試一試 »
