Bootstrap 5 按钮组
按钮组
Bootstrap 5 允许您将一系列按钮分组在一起（在一行上）形成按钮组
使用一个带有 <div> 元素的类 .btn-group 来创建一个按钮组
示例
<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 5 也支持垂直按钮组
使用类 .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>
<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>
自己尝试一下 »
嵌套按钮组和下拉菜单
嵌套按钮组以创建下拉菜单（您将在后面的章节中了解有关下拉菜单的更多信息）
示例
<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-bs-toggle="dropdown">索尼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">平板电脑</a>
<a class="dropdown-item" href="#">智能手机</a>
</div>
</div>
</div>
自己尝试一下 »
