按钮组必须用 .btn-group 容器包裹才生效，直接并排写两个 会导致间隙、圆角未隐藏、小屏换行等问题；.btn-group 提供容器级语义，确保 flex 对齐、统一基线与响应式行为。
按钮组必须用 .btn-group 容器包裹，否则不生效
直接写两个 <button class="btn"></button> 并排，不会自动对齐、消除间隙或统一圆角——Bootstrap 的按钮组样式和行为完全依赖容器级语义。CSS 规则只作用于 .btn-group > .btn 这类后代选择器，没容器就等于没上下文。
常见错误现象：
- 按钮间有默认 4px 间隙，视觉松散
- 中间按钮左右圆角未被隐藏，看起来是三个独立按钮
- 小屏下第二个按钮意外换行（因
<button></button>是 inline-level，受空格/换行符影响）
实操建议：
- 始终用
<div class="btn-group"> <button>A</button><button>B</button> </div> - 补上
role="group"和aria-label，例如：<div class="btn-group" role="group" aria-label="操作栏"> <li>避免手动加 <code>margin调间距，那会破坏响应式行为和 flex 布局逻辑 - 纯垂直堆叠：用
<div class="btn-group-vertical"> 即可 <li>需要响应式切换（比如小屏垂直、大屏水平）：改用 <code>flex-column flex-md-row等工具类，而非依赖.btn-group-vertical - 嵌套需求（如垂直组里再放水平组）：
.btn-group-vertical不支持嵌套，应改用<div class="btn-toolbar" role="toolbar"> 包裹多个 <code>.btn-group性能提示：多加载一个无用的
.btn-group类，虽不影响功能，但会增加 CSS 解析开销和可维护成本。下拉按钮必须配齐三要素：
.dropdown-toggle+data-toggle="dropdown"+.btn只加
.dropdown或只加.btn-group，下拉菜单都不会展开。触发行为的按钮必须同时满足：- 是
<button></button>（或带.btn类的其他元素） - 含
.dropdown-toggle类 - 含
data-toggle="dropdown"属性（值严格为小写dropdown，写成Dropdown或data-bs-toggle在 Bootstrap 4/5 都无效）
容易踩的坑：
- 用
<div class="dropdown"> 包住整个结构，但触发按钮漏掉 <code>data-toggle→ 控制台静默失败，DOM 渲染了但点不动 - 在分裂式下拉中，把普通操作按钮和下拉触发按钮都加
.dropdown-toggle→ 后者能展开，前者也获得下拉箭头，语义错乱 - 用
<a href="#"></a>替代<button></button>却没加.btn类 → 样式断裂，且焦点管理异常 - 开发者习惯性认为 “只要用了 button 标签就自带样式”，但按钮组逻辑不看标签，只看类
- 某些 CMS 或低代码平台导出 HTML 时会把按钮转成
<span></span>，若没补.btn，视觉直接崩坏 - 禁用状态（
disabled）对<a></a>无效，必须配合aria-disabled="true"和tabindex="-1"
按钮组里混用非-
button元素时，.btn类不能省Bootstrap 不识别标签类型，只认类名。你用
<a class="btn"></a>、<input type="button" class="btn">甚至<span class="btn"></span>都可以，但前提是显式加.btn—— 否则无法继承 padding、font-size、border-radius 等核心样式，更不会被.btn-group的布局规则捕获。为什么这容易被忽略：
复杂点在于：如果按钮组里既有
<button></button>又有<a></a>，它们的默认基线、垂直对齐方式不同，仅靠.btn类还不够，得统一加align-items: center或用vertical-align: middle微调——这点文档很少提，但实际项目里几乎必调。 - 是
垂直按钮组别混用 .btn-group 和 .btn-group-vertical
.btn-group-vertical 是独立样式类，不是 .btn-group 的修饰变体。它内部已定义 display: flex; flex-direction: column; 及上下边距、圆角控制逻辑。同时加两个类，不仅冗余，还可能因 CSS 优先级冲突导致顶部/底部按钮直角化（本该圆角却没了）。
使用场景：
