Bootstrap 4 按钮组
按钮组
Bootstrap 4 允许你将一系列按钮组合在一起（在一行上）形成一个按钮组
使用带有类 .btn-group 的 <div> 元素来创建一个按钮组
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">苹果</button>
<button type="button" class="btn btn-primary">三星</button>
<button type="button" class="btn btn-primary">索尼</button>
</div>
尝试一下 »
提示： 而不是将按钮大小应用于组中的每个按钮，可以使用类 .btn-group-lg 创建一个大型按钮组，或使用 .btn-group-sm 创建一个小型按钮组
大型按钮
默认按钮
小型按钮
示例
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">苹果</button>
<button type="button" class="btn btn-primary">三星</button>
<button type="button" class="btn btn-primary">索尼</button>
</div>
尝试一下 »
垂直按钮组
Bootstrap 4 也支持垂直按钮组
使用类 .btn-group-vertical 创建一个垂直按钮组
示例
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">苹果</button>
<button type="button" class="btn btn-primary">三星</button>
<button type="button" class="btn btn-primary">索尼</button>
</div>
尝试一下 »
嵌套按钮组和下拉菜单
嵌套按钮组以创建下拉菜单（你将在后面的章节中学习更多关于下拉菜单的信息）
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">苹果</button>
<button type="button" class="btn btn-primary">三星</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
索尼
</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">索尼</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="#">平板电脑</a>
<a class="dropdown-item" href="#">智能手机</a>
</div>
</div>
尝试一下 »
垂直按钮组带下拉菜单
示例
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">苹果</button>
<button type="button" class="btn btn-primary">三星</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
索尼
</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">苹果</button>
<button type="button" class="btn btn-primary">三星</button>
<button type="button" class="btn btn-primary">索尼</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">宝马</button>
<button type="button" class="btn btn-primary">奔驰</button>
<button type="button" class="btn btn-primary">沃尔沃</button>
</div>
尝试一下 »
