bootstrap按钮组通过.btn-group实现水平排列，.btn-group-vertical实现垂直排列，.btn-toolbar组合多个按钮组形成工具栏，支持多种颜色尺寸，适配响应式布局，无需额外css。

Bootstrap 提供了便捷的按钮组样式，可以将多个按钮水平或垂直排列在一起，形成一个紧凑的控件组。通过简单的类名组合即可实现按钮组效果。

基本按钮组

使用 .btn-group 包裹一组按钮，实现水平排列的按钮组。

每个按钮应放在 <button> 或 <a> 元素中，并添加 .btn 和对应的颜色类（如 .btn-primary）。

• 外层容器添加 .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-vertical 替代 .btn-group。

立即学习“前端免费学习笔记（深入）”；

壁纸样机神器

免费壁纸样机生成

0

查看详情

• 适用于需要纵向空间布局的场景
• 点击区域更易操作，适合移动端
• 同样支持多种颜色和尺寸

<div class=”btn-group-vertical”>
  <button type=”button” class=”btn btn-secondary”>上</button>
  <button type=”button” class=”btn btn-secondary”>中</button>
  <button type=”button” class=”btn btn-secondary”>下</button>
</div>

按钮工具栏

将多个按钮组组合成工具栏，使用 .btn-toolbar 容器包裹多个 .btn-group。

• 常用于编辑器、表格操作等复杂界面
• 可通过 flex 布局自动对齐
• 可结合输入框或其他组件使用

<div class=”btn-toolbar”>
  <div class=”btn-group me-2″>
    <button class=”btn btn-info”>撤销</button>
    <button class=”btn btn-info”>重做</button>
  </div>
  <div class=”btn-group”>
    <button class=”btn btn-success”>保存</button>
  </div>
</div>

基本上就这些。Bootstrap 的按钮组样式简单实用，无需额外 CSS，适配响应式布局，是构建交互控件的常用方案。

以上就是