必须用.nav-pills.flex-column替代.nav-tabs实现垂直选项卡，因后者硬编码flex-direction:row!important且无垂直变体；需配合d-flex外层包裹、w-100宽度控制、text-center、同级tab-content及响应式断点d-none d-md-flex确保布局与交互正确。
不能靠纯 CSS 强行覆盖 .nav-tabs 的 flex-direction——它被硬编码为 row !important，权重高、改不掉，还会破坏激活态样式和 JS 同步逻辑。真正可行的路径是换组件语义：用 .nav-pills.flex-column 替代 .nav-tabs，再配宽度与结构约束。
为什么直接加 flex-column 到 .nav-tabs 无效
Bootstrap 5 的 .nav-tabs 类内部写了 flex-direction: row !important，工具类 flex-column 的选择器权重更低，浏览器 computed 样式里依然显示 row。强行用 !important 覆盖会导致下划线错位、active 边框不贴合、悬停热区偏移，且 tab 插件可能无法正确同步状态。
.nav-pills.flex-column 必须配哪些结构和类
只写 class="nav nav-pills flex-column" 不够，<ul></ul> 容器会塌缩到最窄文字宽（比如“首页”两个字），造成点击区域小、文字换行、移动端溢出：
- 外层必须用
<div class="d-flex"> 包裹 <code><ul></ul>和<div class="tab-content">，二者同级并列，不能嵌套 <li> <code><ul></ul>需显式控制宽度：用w-100（前提是父容器有宽度）、style="width: 12rem;"或栅格如col-md-3 - 每个
<a class="nav-link"></a>必须加text-center+w-100，否则文字左对齐会挤出或折行 - 删掉
nav-fill、nav-justified等冲突类，它们和flex-column不兼容 -
data-bs-toggle="tab"不能省，否则 JS 初始化失败，点击无响应 - 外层
<div class="d-none d-md-flex"> 控制竖排容器仅在 ≥md 显示 <li>同时提供横排版本：<code><div class="d-flex d-md-none"> 套 <code><ul class="nav nav-pills"></ul>，确保小屏仍有可用导航 - 别把
tab-content塞进nav内部——DOM 嵌套错误会导致 JS 初始化失败、active类不同步、内容区塌陷
如何让垂直导航只在中屏以上生效
垂直选项卡在手机上体验差（窄屏+长列表+热区小），官方推荐「≥md 屏竖排，小屏自动切回横排」：
最容易被忽略的是结构层级：垂直布局不是“加个类就行”，而是 d-flex 外层 + nav-pills.flex-column + 显式宽度 + 同级 tab-content 四者缺一不可；漏掉任一环，要么不生效，要么样式/交互崩掉。
