直接用.btn-group-vertical即可实现垂直排列，它原生处理圆角、边框合并和禁用状态，而flex-column仅改方向，易导致样式冲突、视觉错乱及调试困难。
直接用 .btn-group-vertical 就行，别自己写 flex-direction: column —— 它是 Bootstrap 原生支持的垂直堆叠方案，语义清晰、样式可控、无 JS 依赖。
为什么不用手动加 flex-column？
虽然给 .btn-group 加 flex-column 看似能“快速垂直”，但实际埋了三个坑：
-
.btn-group-vertical不只是改flex-direction，它还统一处理首尾按钮的圆角（border-radius）、边框合并（border-bottom: 0/border-top: 0）和禁用状态联动；而flex-column只改方向，其余全靠你手调 - Bootstrap 5+ 中
.btn-group-vertical内部已用flex-direction: column，再叠加flex-column会导致样式重复或冲突（比如间距异常） - 如果按钮里混了
<a></a>或没加.btn类的元素，.btn-group-vertical会明确拒绝渲染（便于排查），而flex-column会照常排，但视觉错乱
.btn-group-vertical 的结构和限制
必须严格按 Bootstrap 要求写结构，否则样式失效：
- 容器必须是
<div class="btn-group-vertical">，不能只给按钮加这个类 <li>子元素只能是 <code><button></button>或带.btn类的元素（比如<button class="btn btn-primary"></button>或<a href="#" class="btn btn-secondary"></a>） - 不能嵌套在
.input-group或.btn-toolbar里——外层容器自带 flex 设置，会覆盖垂直逻辑 - 不要在里面加
d-flex、flex-row这类 display/flex 工具类，它们会干扰默认行为 - 每个按钮单独包一层
<div class="col-12 col-md-4">（注意：Bootstrap 5 已移除 <code>col-xs-，col-12就是 xs 断点） - 外层加
<div class="row gy-2"> 控制行间距（<code>gy-2比手动设margin-bottom更可靠） - 按钮本身仍用
.btn类，但不再套.btn-group或.btn-group-vertical—— 栅格负责布局，按钮类负责样式 - 如果需要水平时按钮紧贴（像原生
.btn-group那样消除间隙），可在md及以上用row-cols-md-3+g-0，但要小心移动端圆角丢失 - 想让按钮“内容宽度”：给每个按钮加
flex-grow-0（推荐）或w-auto - 想等宽且铺满容器：保留默认，或显式加
flex-grow-1 - 想固定宽度（如 120px）：直接加
mw-100+width: 120px（需自定义 CSS 或内联 style，Bootstrap 工具类没提供精确 px 宽度）
响应式切换：小屏垂直、中屏水平怎么搞？
.btn-group-vertical 是全局生效的，不支持断点切换。想实现「sm 垂直 → md 水平」，得退回到栅格系统：
垂直排列后按钮宽度撑满，怎么收窄？
默认下 .btn-group-vertical 会让按钮 width: 100%（因为 align-items: stretch），常见需求有三种处理方式：
最易被忽略的是嵌套场景：比如把 .btn-group-vertical 放进 .card-body，结果按钮没顶到顶部或底部留白——这不是按钮组的问题，而是 .card-body 默认有 padding，得手动重置或换用 .card-text 容器。
