bootstrap 5 按钮组不支持响应式方向切换，因 .btn-group-vertical 仅为静态 flex-direction: column 封装，无断点变体；应改用 flex-column + flex-{breakpoint}-row 组合实现，如 class="btn-group flex-column flex-md-row"。
Bootstrap 5 按钮组无法靠单一类名实现“小屏垂直、大屏水平”的响应式切换——.btn-group-vertical 是静态方向，没有内置断点类；必须组合栅格或 flex 工具类手动控制。
为什么 .btn-group-vertical 不支持响应式？
该类本质是 CSS 规则 flex-direction: column 的封装，Bootstrap 5 并未提供 flex-sm-column 或 btn-group-vertical-md 这类断点变体。所有「响应式 flex 方向」都需显式叠加类名，且优先级必须覆盖默认的 row 行为。
-
.btn-group默认是flex-direction: row，即使加了.btn-group-vertical，它也只是覆盖一次，不会随视口变化而切换 - 试图混用
.btn-group和.btn-group-vertical在同一元素上，可能引发圆角异常（顶部/底部按钮直角）或边框合并失效 - 响应式需求一旦出现，
.btn-group-vertical就该退场，换更底层、可控性更强的方案
用 flex-column + 断点类实现真响应式
这是目前最轻量、语义清晰、兼容性稳妥的做法：直接在 .btn-group 容器上叠加方向类，利用 Bootstrap 5 内置的断点前缀（如 flex-md-row）控制切换时机。
- 小屏垂直、中屏及以上水平：
class="btn-group flex-column flex-md-row" - 小屏垂直、大屏水平：
class="btn-group flex-column flex-lg-row" - 注意顺序：
flex-md-row必须写在flex-column后面，否则会被覆盖 - 若按钮宽度需统一撑满（如表单操作区），加
w-100；若需收窄，加flex-grow-0阻止拉伸 - 避免嵌套：
.btn-group内不要再套.btn-group，尤其在响应式场景下容易导致间距错乱或 flex 嵌套冲突
用栅格（.row + .col）替代按钮组的适用场景
当按钮逻辑复杂（比如含下拉、分裂式、禁用态联动）、或需要精确控制每行按钮数量与宽度时，栅格比按钮组更可靠——它不依赖按钮组的边框合并逻辑，也不强制子元素必须是 .btn。
- 结构示例：
<div class="row g-2"><div class="col-12 col-md-4"><button class="btn btn-primary w-100">A</button></div></div> -
g-2提供响应式间隙（等效于gap），无需在每个按钮上加mb-2，避免间距翻倍 - 小屏单列（
col-12）、中屏三等分（col-md-4）可自然实现“垂直→水平”过渡 - 缺点：失去
.btn-group的边框融合效果（相邻按钮无共享边框），如需模拟，得额外加border-end-0等工具类
点击后容器意外滚动？先查 .btn-check 定位
在响应式按钮组中使用隐藏单选/复选（.btn-check + label）时，若点击后父容器（如带 overflow-y: auto 的卡片）自动滚动到中间，大概率是 .btn-check 被设为 position: absolute，导致浏览器聚焦时强行滚动至其原始文档位置（常为顶部）。
- 修复方式：重写
.btn-check样式，用clip-path: inset(50%)+position: relative替代绝对定位 - 检查是否在 HTML 中写了
style="position:absolute;top:0;"，必须删掉 - 验证方法：DevTools 中临时禁用
.btn-check的position，看滚动是否消失 - 这个坑和响应式无关，但常在垂直按钮组中暴露——因为垂直排列放大了滚动偏移的视觉感知
真正要注意的不是“怎么写对”，而是“什么时候不该用按钮组”。响应式布局里，.btn-group 的语义是「一组功能强关联、视觉紧耦合的操作按钮」；如果只是想排版整齐，栅格或 stack 更自由，也更少隐性约束。
