.btn-group-vertical 是 bootstrap 原生支持的垂直按钮堆叠方式，需包裹在 中，子元素仅限 、 或带 .btn 类的元素；bootstrap 5+ 默认使用 flex-direction: column，无需额外加 flex-column；响应式横/纵切换应使用栅格系统（如 .col-12.col-md-4）配合 .row 和 .gy-2，不可混用按钮组与栅格；常见问题多因嵌套、元素类型不匹配或自定义样式干扰所致；该类纯 css 实现，无 js 依赖，兼容 bootstrap 4/5。
用 .btn-group-vertical 是最直接的垂直堆叠方式
Bootstrap 原生就支持按钮垂直排列，不需要自己写 CSS 或改 flex 方向。核心就是把 .btn-group 换成 .btn-group-vertical，它会自动把子按钮设为块级、上下堆叠，并处理好边框合并和圆角逻辑。
- 必须包裹在
<div class="btn-group-vertical"> 中，不能只给单个按钮加这个类 <li>子元素只能是 <code><button></button>、<a></a>或带.btn类的元素，否则样式可能失效 - 在 Bootstrap 5+ 中，
.btn-group-vertical默认使用 flex 布局（flex-direction: column），所以别再手动加flex-column—— 会重复覆盖导致间距异常 - 每个按钮单独放在一个
<div class="col-12 col-sm-12 col-md-4"> 里，这样在 <code>sm（≥576px）及以下占满整行，自然垂直；md（≥768px）起每行最多 3 个 - 务必加上
.row和.gy-2（或.gy-3）控制行间距，否则小屏堆叠时按钮紧贴在一起 - 别用
.col-xs-*：Bootstrap 5 已移除xs前缀，.col-*就等价于旧版.col-xs-* - 用了
.btn-group-vertical但按钮外层还有.btn-group—— 嵌套了，样式打架，删掉外层.btn-group - 按钮里混用了
<input type="button">和<button></button>：Bootstrap 的垂直组只对.btn类做边框合并，<input>不参与，统一用<button class="btn"></button> - 在按钮上额外加了
margin-bottom或display: block：干扰了.btn-group-vertical内置的 flex 对齐逻辑，优先删自定义样式 - Bootstrap 4/5 都支持该类，无需额外加载
button.js - 如果项目里禁用了 Bootstrap 的 CSS（比如只用了 JS 插件包），那
.btn-group-vertical肯定不生效 —— 这时候不是写法问题，是资源没加载对 - 真要动态切换横/纵布局？用 JS 切换类名即可：
el.classList.toggle('btn-group-vertical')，别重写整个 DOM 结构
响应式场景下：sm 屏幕堆叠，md 以上并排？得靠栅格系统
.btn-group-vertical 是全局生效的，它不管屏幕尺寸。如果你想要「小屏垂直、中屏及以上水平」，就不能依赖按钮组本身，而要退回到栅格布局。
常见错误：按钮没垂直、错位、边框重叠异常
这些不是 bug，基本都是结构或类名冲突导致的。
兼容性与性能提醒：别为了垂直堆叠引入 JS
有人看到“按钮组插件”文档，误以为要用 JS 才能激活垂直模式 —— 完全不需要。.btn-group-vertical 是纯 CSS 实现，无 JS 依赖，所有现代浏览器都支持。
.d-md-flex 或临时 !important 边距，短期看着行，后续维护时谁也说不清按钮到底是靠什么堆叠的。
