.bootstrap推荐唯一垂直按钮组方式是.btn-group-vertical，它原生处理圆角、边框合并、禁用态和间距，手动加flex-column需自行补全三套样式；必须用于容器且子元素仅限<button class="btn">。
直接用 .btn-group-vertical，别自己加 flex-column 或其他 flex 工具类——它不是“可选方案”，而是 bootstrap 原生垂直按钮组的唯一推荐方式。
为什么 .btn-group-vertical 是首选
它不只是把 flex-direction 改成 column，还一并处理了：首尾按钮的圆角（border-top-radius / border-bottom-radius）、相邻按钮之间的边框合并（避免双线）、禁用状态下的统一灰度、以及垂直间距的合理缩放。手动加 flex-column 后，你得自己补这三套样式，否则视觉上会漏边、直角、错位。
- 必须写在容器上：
<div class="btn-group-vertical"></div>，不能只给按钮加这个类 - 子元素只能是
<button class="btn">，混用<input type="button">会导致边框断开 - 不能嵌套在
.input-group或.btn-toolbar里——它们自带 flex 设置，会覆盖垂直逻辑 - 不要同时写
class="btn-group btn-group-vertical"，两个类对flex-direction冲突，.btn-group的row会赢
加了 .btn-group-vertical 却还是横着排？查这几点
不是类没加载，而是被更高优先级样式覆盖或结构不合规：
- 打开 DevTools，看 computed 样式里
flex-direction是否真的是column；如果不是，检查是否被外层.btn-toolbar或自定义 CSS 覆盖 - 确认没在按钮上额外加
margin-bottom或display: block——.btn-group-vertical内部靠 flex 控制间距，加 margin 会破坏对齐 - 检查是否有
d-flex、flex-row等工具类写在同一个容器上，它们会和.btn-group-vertical的 flex 规则打架 - 用浏览器“元素高亮”功能确认结构：外层是
<div class="btn-group-vertical">，里面直接是<button class="btn">，中间不能夹杂<div>或文字
响应式切换（小屏垂直 → 中屏水平）不能靠 .btn-group-vertical
它没有断点变体，.btn-group-vertical 就是固定垂直。要响应式，必须放弃它，改用底层 flex 工具类组合：
- 写法：
class="btn-group flex-column flex-md-row"（注意顺序：flex-md-row必须在后，才能覆盖flex-column） - 小屏（
xs）垂直，中屏（md及以上）恢复水平排列 - 按钮宽度默认撑满，如需“内容宽度”，给每个按钮加
flex-grow-0；如需等宽铺满容器，保留默认或加flex-grow-1 - 若按钮逻辑复杂（比如含下拉、分裂式），建议直接用栅格：
<div class="row g-2"><div class="col-12 col-md-4"><button class="btn"></button></div></div>，更可控且不依赖按钮组的边框合并逻辑
垂直后按钮太宽？收窄的三种常见方式
默认下 .btn-group-vertical 让按钮 width: 100%（align-items: stretch），但实际需求往往更灵活：
- 让按钮宽度随内容收缩：给每个按钮加
flex-grow-0（推荐），或w-auto - 让所有按钮等宽并铺满容器：不加额外类，或显式加
flex-grow-1 - 设固定宽度（如 120px）：需内联
style="width: 120px;"或自定义 CSS；Bootstrap 没有w-120这类工具类
真正容易被忽略的是：垂直按钮组的样式一致性完全依赖于结构纯净——只要有一个按钮不是 <button class="btn">，边框合并就失效，上下按钮之间就会出现多余白边或双线。这不是 bug，是设计前提。
