直接用.btn-group-vertical即可实现垂直排列，但不可与.btn-group混用以防样式冲突；它专用于button标签，提供边框合并、圆角及垂直间距，而flex-column仅改flex-direction且更通用。
直接用 .btn-group-vertical 就行，但必须单独用、不能和 .btn-group 一起写，否则样式冲突导致圆角错乱或边框合并失效。
为什么加了 .btn-group-vertical 还是横着排？
不是类没起作用，而是它被别的样式覆盖或干扰了：
- 检查是否同时写了
class="btn-group btn-group-vertical"—— 这会触发两套 flex 规则打架，.btn-group强制flex-direction: row，压过.btn-group-vertical的column - 确认按钮都是
<button class="btn"></button>，别混用<input type="button">—— 后者不参与 Bootstrap 的边框合并逻辑，垂直组里会漏边框 - 删掉按钮上额外加的
margin-bottom或display: block——.btn-group-vertical内部靠 flex 控制间距，自定义 margin 会破坏对齐 - 用浏览器 DevTools 看 computed 样式，确认
flex-direction真的是column，而不是被.btn-toolbar或外层.input-group覆盖
.btn-group-vertical 和 flex-column 有什么区别？
两者都能让按钮竖排，但适用场景和行为不同：
-
.btn-group-vertical是 Bootstrap 原生按钮组专用类，自带边框合并（上下按钮共用一条边）、顶部/底部圆角、合适的垂直间距，只适用于<div class="btn-group-vertical"> 包裹 <code><button class="btn"></button>的结构 -
flex-column是通用 flex 工具类，只改flex-direction，不处理边框、圆角或按钮专属间距 —— 适合非标准按钮结构，比如里面混了文字、图标或其他组件 - Bootstrap 4+ 都支持
flex-column；.btn-group-vertical在 v3 不可用（得手写 CSS），v4/v5 均原生支持且无 JS 依赖 - 写成
class="btn-group flex-column flex-md-row"：小屏（xs）用flex-column，中屏及以上（md及以上）覆盖为flex-row - 如果用了
.btn-group-vertical，它不支持响应式切换 —— 它是固定垂直的，想响应式就得放弃它，改用flex-column+ 断点类 - 注意父容器高度：如果垂直组放在一个高度不确定的容器里，
justify-content-center可能失效，需要显式设min-height或h-100
响应式需求：小屏垂直、大屏水平，怎么切？
Bootstrap 没有内置 flex-sm-column 这类断点类，但可以用组合类实现：
真正容易被忽略的是：垂直按钮组的视觉一致性依赖于所有按钮都用 <button></button> 标签 + .btn 类。哪怕只有一个按钮是 <input>，上下边框就断开了——这不是 bug，是设计使然。
