Bootstrap 按钮组

问题

Bootstrap 如何制作按钮组？水平按钮组和垂直按钮组的优先级是怎样的？

解答

水平按钮组

使用 .btn-group 类将多个按钮包裹在一起，形成水平排列的按钮组。

<!-- 水平按钮组 -->
<div class="btn-group" role="group" aria-label="水平按钮组">
  <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-vertical 类创建垂直排列的按钮组。

<!-- 垂直按钮组 -->
<div class="btn-group-vertical" role="group" aria-label="垂直按钮组">
  <button type="button" class="btn btn-success">上</button>
  <button type="button" class="btn btn-success">中</button>
  <button type="button" class="btn btn-success">下</button>
</div>

按钮组尺寸

通过添加 .btn-group-lg 或 .btn-group-sm 控制按钮组大小。

<!-- 大尺寸按钮组 -->
<div class="btn-group btn-group-lg" role="group">
  <button type="button" class="btn btn-outline-primary">大</button>
  <button type="button" class="btn btn-outline-primary">按钮</button>
</div>

<!-- 小尺寸按钮组 -->
<div class="btn-group btn-group-sm" role="group">
  <button type="button" class="btn btn-outline-secondary">小</button>
  <button type="button" class="btn btn-outline-secondary">按钮</button>
</div>

优先级问题

当同时使用 .btn-group 和 .btn-group-vertical 时：

<!-- 同时添加两个类 -->
<div class="btn-group btn-group-vertical" role="group">
  <button type="button" class="btn btn-info">按钮1</button>
  <button type="button" class="btn btn-info">按钮2</button>
</div>

结果：垂直按钮组生效。

原因是在 Bootstrap 的 CSS 中，.btn-group-vertical 的样式定义在 .btn-group 之后，根据 CSS 层叠规则，后定义的样式会覆盖先定义的样式。

/* Bootstrap 源码中的顺序 */
.btn-group {
  display: inline-flex;
  /* 水平排列样式 */
}

.btn-group-vertical {
  flex-direction: column;
  /* 垂直排列样式，后定义，优先级更高 */
}

关键点

• 水平按钮组使用 .btn-group，垂直按钮组使用 .btn-group-vertical
• 同时使用两个类时，.btn-group-vertical 优先级更高（CSS 后定义覆盖先定义）
• 使用 .btn-group-lg / .btn-group-sm 调整按钮组尺寸
• 添加 role="group" 和 aria-label 提升可访问性
• 按钮组内的按钮会自动去除相邻边框的圆角