按钮组必须用 .btn-group 容器包裹才能生效，下拉需 dropdown-toggle 和 data-toggle="dropdown"，垂直组用 btn-group-vertical 独立类，非 button 元素须显式加 .btn 类，禁用须用 disabled 属性并补 role="group" 与 aria-label 保障可访问性。
按钮组必须用 .btn-group 容器包住，不能只加类名就完事
很多人把几个 <button class="btn"> 并排写，以为加了 btn 类就自动“组合”了——其实不会。bootstrap 的按钮组逻辑依赖容器级语义：只有套在 <div class="btn-group"> 里，css 才会取消中间按钮的圆角、收紧边距、统一 hover/focus 状态。
- 错误写法：
<button class="btn">A</button><button class="btn">B</button>→ 按钮独立，有间隙，圆角全保留 - 正确写法：
<div class="btn-group"><button class="btn">A</button><button class="btn">B</button></div> - 辅助技术需要
role="group"，建议补上：<div class="btn-group" role="group">
下拉按钮必须配 dropdown-toggle + data-toggle="dropdown"
想让按钮带下拉菜单？光加 .dropdown 类或 .btn-group 不够。关键在于触发行为的那一个按钮：它得同时满足三个条件——是 .btn、带 .dropdown-toggle 类、且 data-toggle="dropdown" 属性值必须为 "dropdown"（大小写敏感，不能写成 Dropdown 或 drop-down）。
- 缺失
data-toggle→ 点击无反应，控制台也无报错，纯静默失效 - 用了
<div class="dropdown">却没配data-toggle→ 下拉菜单不展开，但 DOM 已渲染，容易误判为样式问题 - 分裂式下拉（split dropdown）要两个按钮：一个普通
<button class="btn">，另一个专用于触发，带.dropdown-toggle和data-toggle
垂直按钮组只需加 .btn-group-vertical，但别和 .btn-group 冲突
.btn-group-vertical 是独立类，不是 .btn-group 的变体。它本身已包含垂直堆叠所需的 display、margin、border 样式。如果同时写 class="btn-group btn-group-vertical"，虽然能用，但会多加载冗余规则，且可能因 CSS 优先级导致圆角异常（比如顶部/底部按钮本该圆角，却变成直角）。
- 推荐写法：
<div class="btn-group-vertical">...</div>（去掉btn-group） - 响应式场景慎用：垂直组在小屏下容易撑宽容器，建议配合
col-*栅格控制宽度 - 不支持嵌套：
.btn-group-vertical内部再套.btn-group会导致样式断裂，需改用工具栏（role="toolbar"）替代
按钮组里混用非 <button> 元素时，必须手动加 .btn 类
Bootstrap 只认类名，不认标签类型。你完全可以用 <a> 或 <input type="button"> 替代 <button>，但前提是它们必须显式声明 class="btn"，否则不会继承按钮组的间距、圆角、禁用态等逻辑。
-
<a href="#" class="btn btn-primary">链接按钮</a>✅ 可放入.btn-group -
<input type="button" value="提交">❌ 即使加了btn类，若漏掉btn-primary等主题类，颜色/尺寸会退化为默认灰色 - 禁用状态必须用
disabled属性（<button disabled>），仅加.disabled类已废弃，且对<a>无效
role="group" 和 aria-label 的搭配——尤其当按钮组没有可见文字标题（比如全是图标按钮）时，屏幕阅读器根本不知道这是一组什么功能的控件。这时候不补 aria-label="编辑操作组"，等于主动放弃可访问性。 
