Bootstrap4 按钮组

按钮组

Bootstrap 4 允许您将一系列按钮组合在一起（在一行上）形成一个按钮组：

用一个<div>具有类的元素.btn-group创建按钮组：

示例

亲自试一试 »

提示：不要将按钮大小应用于组中的每个按钮，而是使用类.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="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</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="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
</div>
</div>

亲自试一试 »

并排按钮组

默认情况下，按钮组为"inline"，这使得当您有多个组时它们并排显示：

示例

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

亲自试一试 »