Bootstrap按钮组垂直排列需在.btn-group容器加flex-column类；v3需手写CSS；响应式可用flex-sm-column+flex-md-row组合；父容器缺高度会导致居中失效。
Bootstrap 按钮组默认是水平排列，怎么改成垂直？
bootstrap 的 .btn-group 默认就是水平排布（flex-direction: row），想让它竖着排，不能靠改按钮本身，得改容器的 flex 方向。最直接的办法是用 flex-column 类——它会把按钮组变成垂直弹性容器。
- 必须加在
.btn-group容器上，不是按钮上；比如：<div class="btn-group flex-column">...</div> - Bootstrap 5+ 原生支持
flex-column，无需额外 CSS；v4 也支持，v3 不支持（得手写flex-direction: column） - 垂直排列后，按钮宽度默认会撑满父容器（因为
align-items: stretch是默认行为），如果想让按钮“收窄”，得额外加flex-grow-0或设width
为什么加了 flex-column 还是没垂直？常见失效原因
加了 flex-column 却还是横着排，大概率是类名没生效，或者被其他样式覆盖了。尤其注意：
- 检查是否误用了
flex-column-reverse（它也是垂直，但顺序倒过来了） - 确认没有同时存在
d-flex或其它冲突的 display 类（比如d-inline-flex会干扰方向） - 如果按钮组嵌套在
.input-group或.btn-toolbar里，外层容器可能自带 flex 设置，优先级更高，需要更具体的覆盖 - 浏览器 DevTools 里看 computed 样式，确认
flex-direction确实是column，而不是被 reset 成row
响应式场景下：小屏垂直、大屏水平，怎么切？
Bootstrap 没有内置 flex-sm-column 这种断点类，但可以用组合类实现：在小屏强制垂直，中屏及以上恢复默认水平。
- 写法是：
<div class="btn-group flex-sm-column flex-md-row"> <li> <code>flex-sm-column：≥576px（sm）开始生效，即小屏（xs）仍按默认 row，sm 起变 column -
flex-md-row：≥768px（md）起覆盖前面的 column，变回水平——这样就实现了「sm 垂直，md+ 水平」 - 注意顺序：后面写的类会覆盖前面的，所以
flex-md-row必须写在flex-sm-column后面 - 给
.row加h-100或min-vh-100，确保它有可对齐的空间 - 再配合
align-items-center（对齐交叉轴，即垂直方向）或justify-content-center（主轴，即水平方向） - 如果整行只有一列按钮组，更简单：直接给该
.col加d-flex flex-column justify-content-center align-items-center - 别忘了：
align-items-center对的是子元素（按钮），不是按钮内部文字；按钮内文字居中还得靠text-center
和栅格系统混用时，按钮组垂直对齐总偏上，怎么调？
把 .btn-group.flex-column 放进 .col 里，发现按钮贴顶、居不中？这不是按钮组的问题，是父级 .row 缺少高度上下文，导致 align-items-center 之类无效。
