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