flex-column 是 Bootstrap 5+ 原生支持的纵向堆叠语义化工具类，必须加在直接父容器上（如 <div class="d-flex flex-column">），配合不同组件需适配结构：分页需确保 CSS 优先级，选项卡应改用 .nav-pills.flex-column，按钮组优先使用 .btn-group-vertical。
用 flex-column 替代默认的水平排列
bootstrap 的弹性布局默认是横向（flex-direction: row），所以子元素并排显示。要纵向堆叠，必须显式切换主轴方向——flex-column 就是为此设计的工具类，不是“加个样式试试”，而是 bootstrap 5+ 原生支持的语义化方式。
常见错误是只给内容容器加 d-flex 却漏掉 flex-column，结果还是横着排；或者误加 flex-column-reverse，顺序颠倒但自己没意识到。
-
flex-column必须加在直接父容器上，比如<div class="d-flex flex-column">，不能只加在子项上 - 如果父容器本身是
.row或.input-group，它们自带 flex 设置，会覆盖flex-column，需抽离或重写结构 - 垂直后
justify-content控制的是子项在**纵轴上的对齐位置**（如justify-content-center让所有子项在垂直方向居中），不是文字对齐
垂直分页组件必须改 flex-direction，但别只动这一行
Bootstrap 分页（.pagination）默认用 display: flex + flex-direction: row，纵向只需覆盖方向，但仅写 .pagination { flex-direction: column; } 很容易失效。
原因通常是优先级不够：Bootstrap 的 CSS 文件加载早、选择器权重高，你的自定义样式被覆盖了。DevTools 里看 computed 样式，如果 flex-direction 显示为 row，说明没生效。
- 确保自定义 CSS 放在 Bootstrap CSS 引入之后，或加
!important（不推荐，但临时调试有效） -
.page-item在纵向后自动撑宽，若想收窄，得额外设width或max-width，不能依赖text-center - 焦点顺序仍按 DOM 顺序走，但视觉跳跃变大——如果用了
order打乱 DOM，屏幕阅读器和键盘导航会错位
垂直选项卡别硬扭 .nav-tabs，改用 .nav-pills.flex-column
.nav-tabs 是为横向设计的，强行加 flex-column 会导致下划线错位、激活态边框不贴合、间距异常。Bootstrap 官方方案是换一套语义：用 .nav-pills 配合 .flex-column。
这不是“妥协”，而是结构适配——.nav-pills 默认无底边线、有背景色和圆角，更适合侧边栏式垂直导航。
-
.flex-column必须加在<ul class="nav nav-pills">上，不是外层<nav> - 每个
<li class="nav-item">必须包裹<a class="nav-link">，漏掉.nav-item会导致 flex 布局失效 - JS 切换 tab 时，
.active类不会自动同步到.nav-link上，得手动调用bootstrap.Tab.getInstance(el).show()或触发 click
按钮组垂直排列优先用 .btn-group-vertical，别手写 flex-column
.btn-group-vertical 不只是改方向，它还统一处理首尾按钮的圆角、边框合并（比如中间按钮去掉上下边框）、禁用状态联动。手写 flex-column 只改了方向，其余全得你补。
典型问题：按钮之间出现双倍边框、圆角只剩一角、禁用按钮样式不一致——都是因为跳过了这个原生类。
- 结构必须是
<div class="btn-group-vertical"><button class="btn">...</button></div>，不能把类加在<button>上 - 子元素只能是
<button>或带.btn类的元素，混入<div>或纯文本会破坏样式 - 响应式需求（如小屏垂直、中屏水平）不能靠断点类实现，
.btn-group-vertical没有flex-sm-column这种变体，得退回到栅格系统
