应使用 .btn-group-vertical 类实现垂直按钮组，它自动处理圆角、边框合并、禁用态及间距；手动加 flex-column 会导致样式缺失；需确保容器正确、子元素为 button 标签、无冲突工具类。
直接用 .btn-group-vertical，别自己加 flex-column
Bootstrap 原生垂直按钮组只认 .btn-group-vertical 这一个类，它不只是改 flex-direction: column，还一并处理首尾圆角、相邻按钮边框合并、禁用态灰度和垂直间距缩放。手动加 flex-column 后，这些细节全得自己补，否则会漏边、直角、错位。
常见错误包括：
- 给单个按钮加
.btn-group-vertical—— 必须写在容器上：<div class="btn-group-vertical"></div> - 子元素混用
<input type="button">—— 只支持<button class="btn">，否则边框断开 - 外层套了
.btn-toolbar或.input-group—— 它们自带 flex 设置，会覆盖垂直逻辑 - 同时写了
class="btn-group btn-group-vertical"—— 两个类对flex-direction冲突，.btn-group的row会赢
.btn-group-vertical 失效时查什么
按钮还是横着排？不是类没加载，而是结构或样式被干扰。打开 DevTools 看 computed 样式里 flex-direction 是否真为 column：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 检查是否被外层
.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="col-12 col-md-4">配合.row和.gy-2
嵌套或混用时的视觉断裂点
垂直按钮组最脆弱的地方不在代码本身，而在上下文环境：
-
.btn-group-vertical不能嵌套在另一个.btn-group里 —— 嵌套会导致样式打架，删掉外层.btn-group - 如果按钮组放在
.input-group内部，.input-group的display: flex会强制重置方向，垂直失效 - 用
.btn-group-vertical+align-items-center居中时，父容器若没高度上下文（比如没设h-100或min-vh-100），按钮会贴顶不居中 - 所有现代浏览器都支持该类，无 JS 依赖 —— 别为了垂直引入额外脚本，纯 CSS 就够了
