必须为直接父容器添加 d-flex flex-column 才能实现纵向堆叠；justify-content- 控制垂直分布，align-items- 控制水平对齐；响应式需配合 d-md-flex 和 flex-md-row；专用组件应使用对应垂直类而非硬套 flex-column。
必须加 flex-column，且只能加在直接父容器上
Bootstrap 的弹性容器默认是水平排列（flex-direction: row），光加 d-flex 不会变成纵向。要纵向堆叠，唯一可靠的方式是显式添加 flex-column 类——它不是“辅助样式”，而是 Bootstrap 5+ 原生定义的语义化方向控制类。
常见错误包括：
- 只给子元素加
flex-column，但父容器没加d-flex，结果完全不生效 - 把
flex-column加在.row或.input-group这类自带 flex 设置的容器上，被内部样式覆盖 - 误用
flex-column-reverse导致顺序颠倒，却没意识到 DOM 顺序已变
正确写法示例：
<div class="d-flex flex-column"> <div>第一项</div> <div>第二项</div> <div>第三项</div> </div>
justify-content-center 和 align-items-center 在纵向时各管什么
主轴变成 vertical 后，对齐逻辑彻底反转：此时 justify-content-* 控制的是**纵向分布**（上下位置），而 align-items-* 控制的是**横向对齐**（左右位置）。
也就是说：
- 想让所有子项在页面中“垂直居中”，用
justify-content-center，不是align-items-center - 想让所有子项“水平居中”，才用
align-items-center - 若父容器没有足够高度（比如没设
h-100或min-vh-100），justify-content-center会失效——它需要参照系
单个子项需特殊对齐？用 align-self-end 这类类直接加在该子项上，例如按钮右对齐：
<div class="d-flex flex-column align-items-center justify-content-center h-100"> <div>标题</div> <button class="btn btn-primary align-self-end">操作</button> </div>
响应式切换：小屏纵向、中屏横向怎么写
用 flex-column + flex-md-row 组合，但顺序不能错——flex-md-row 必须写在后面，否则不会覆盖。
原因在于 Bootstrap 响应式类是「覆盖式生效」：flex-column 全尺寸生效，flex-md-row 从 768px 起生效并覆盖前者。如果漏掉 d-md-flex，中屏下容器可能退化为 block 流，导致 flex-md-row 失效。
完整写法：
<div class="d-flex flex-column d-md-flex flex-md-row"> <div>A</div> <div>B</div> <div>C</div> </div>
注意：d-md-flex 不可省略，否则 md 断点下 flex-md-row 无作用。
别用 flex-column 硬套原生组件，优先选专用类
对分页、选项卡、按钮组这类有固定结构的组件，强行加 flex-column 容易出样式冲突。
正确做法是换用 Bootstrap 提供的专用垂直方案：
- 分页：改用
.pagination.flex-column（需确保 CSS 优先级，或加!important临时调试） - 选项卡：弃用
.nav-tabs，改用.nav-pills.flex-column - 按钮组：必须用
.btn-group-vertical，它不只是改方向，还统一处理圆角、边框合并和禁用态；手动加flex-column会导致双线、直角、间距异常
最常被忽略的一点：这些专用类都要求结构严格——比如 .btn-group-vertical 必须包裹在 <div class="btn-group-vertical"> 中，子元素只能是 <code><button class="btn"></button>，中间不能插 <div> 或文字。</div>
