必须用 .nav-pills.flex-column 替代 .nav-tabs 实现垂直选项卡，因后者硬编码 flex-direction: row !important 且无垂直变体；需配合宽度控制、text-center、w-100 及响应式断点 d-none d-md-flex 等确保布局与交互正确。
不能靠纯 CSS 强行改 .nav-tabs 的 flex-direction —— Bootstrap 5 的 .nav-tabs 类内部硬编码了 flex-direction: row，且优先级高，覆盖无效；真正能稳定生效的垂直布局，必须用 .nav-pills.flex-column + 响应式断点控制。
为什么直接加 flex-column 到 .nav-tabs 不起作用
Bootstrap 5 没有为 .nav-tabs 提供垂直变体，它的 CSS 规则里明确写了 flex-direction: row !important。即使你在 HTML 中写 class="nav nav-tabs flex-column"，浏览器 computed 样式里依然显示 row —— 因为工具类 flex-column 的选择器权重低于内置规则。
-
.nav-tabs是为底部横线激活态设计的，垂直后下划线位置错乱、边框不贴合、间距异常 - 强行覆盖 CSS（比如写
.nav-tabs { flex-direction: column !important; }）会破坏激活态背景、悬停效果和 JS 同步逻辑 - 官方明确推荐：垂直场景改用
.nav-pills，它默认无下划线、支持flex-column、样式更干净
正确结构：用 .nav-pills.flex-column 并确保宽度约束
只加 flex-column 不够，<ul> 容器会收缩到最窄文字宽（比如“首页”两个字），导致点击区域小、文字换行、移动端溢出。必须同步控制宽度。
- 给
<ul class="nav nav-pills flex-column">加显式宽度，例如style="width: 12rem;"或工具类w-100（前提是父容器有宽度） - 每个
<a class="nav-link">要加text-center和w-100，否则文字左对齐会超出容器或触发意外折行 - 删掉
nav-fill、nav-justified等冲突类，它们和flex-column不兼容，会导致项宽异常或换行错乱
响应式断点：移动端回退横排，不是强制竖排
垂直选项卡在手机上体验差（窄屏+长列表+点击热区小），所以实际方案是「中屏及以上竖排，小屏自动切回横排」，靠 d-none d-md-flex 控制外层容器，而非在 nav 上做条件样式。
立即学习“前端免费学习笔记（深入）”；
- 外层用
<div class="d-flex">包裹nav和tab-content，二者必须同级并列 - 竖排容器加
d-none d-md-flex：小屏隐藏，≥md 屏显示为 Flex 垂直布局 - 对应横排版本用
d-flex d-md-none，确保小屏仍有可用导航（别漏掉！） - 千万别把
tab-content塞进nav里——DOM 嵌套错误会导致 JS 初始化失败、active 类不同步、内容区塌陷
JS 切换必须走官方 API，避免手动操作 DOM
手写 classList.add('active') 很容易漏掉旧项移除，造成多个 tab 同时高亮；而 bootstrap.Tab.getInstance(el).show() 才能保证状态真实同步。
- 动态渲染后（如 AJAX 加载 tab 内容），先调用
bootstrap.Tab.getOrCreateInstance再.show() - 监听
shown.bs.tab事件时，检查e.target是否为当前nav-link，而不是靠data-bs-target字符串匹配 - 如果用 hash 路由切换 tab，务必在
hashchange回调里显式调用.show()，否则视觉与状态脱节
最容易被忽略的是三件事：外层 d-flex 容器是否包裹了同级的 nav 和 tab-content、所有 nav-link 是否都带了 data-bs-toggle="tab"、响应式断点类是否成对出现（d-none d-md-flex + d-flex d-md-none）。漏一个，就变成“看起来像，点不动，或者手机上一团糟”。
