应使用.nav-pills.flex-column实现垂直选项卡，而非强行修改.nav-tabs；需严格遵循Bootstrap 5语义结构，确保<li>包裹、正确设置data-bs-toggle和tab-content关联，并通过栅格系统控制宽度及JS API同步激活态。
用 .nav-pills + .flex-column 实现垂直选项卡
bootstrap 默认的 .nav-tabs 是水平布局，强行加 flex-direction: column 会破坏样式（比如下划线位置错乱、激活态边框不贴合）。真正可靠的做法是改用 .nav-pills，再叠加 .flex-column 类 —— 它专为垂直排列设计，自带垂直对齐、间距和激活态样式。
关键点：不是“让 tabs 垂直”，而是“用 pills 替代 tabs 来达成垂直导航效果”。
-
.nav-pills默认无下划线，激活项有背景色+圆角，更适合侧边栏场景 -
.flex-column必须加在<ul>上，不能只加在父容器 - 如果需要类似 tabs 的底部横线激活态，得手动覆盖
.nav-link.active的border-bottom，但此时建议直接写 CSS 而非强扭 pills
垂直 Pills 的 HTML 结构必须严格匹配 Bootstrap 5 语义
结构松散会导致 flex 布局失效或响应式异常。尤其注意：每个 <li> 必须包裹 <a class="nav-link">，不能把 class="nav-link" 直接写在 <li> 上。
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#home" data-bs-toggle="tab">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" data-bs-toggle="tab">档案</a>
</li>
</ul>
- 漏掉
.nav-item会导致.nav-link的上下 margin 失效，项与项之间挤在一起 -
data-bs-toggle="tab"不能省略，否则 JavaScript 初始化失败，点击无响应 - 对应的内容区要用
<div class="tab-content">包裹，且每个.tab-pane的id必须和href值一致（如#home）
垂直时如何控制宽度和对齐？别碰 width，用栅格或工具类
直接给 .nav-pills.flex-column 设 width: 200px 很容易在小屏上溢出或撑破容器。Bootstrap 推荐用内置栅格系统或间距工具类约束。
- 放在
<div class="col-md-3">内，内容区放<div class="col-md-9">，天然响应式分栏 - 用
me-auto或mx-auto控制水平居中/靠左，避免用text-center（它会让文字居中但不控制 nav 宽度） - 若需等宽项，给每个
.nav-link加width: 100%，但前提是父<ul>有明确宽度（比如min-width: 180px），否则在窄屏下会过窄
JavaScript 切换内容时，垂直 Pills 的 active 类不会自动同步
这是最容易被忽略的坑：Bootstrap 的 tab 插件默认只处理 .nav-tabs 和 .nav-pills 的激活逻辑，但如果你手动用 JS 触发切换（比如 new bootstrap.Tab(...).show()），而 DOM 中 .nav-link 没有正确添加 active，视觉就会脱节。
- 确保每次切换后，对应
<a>元素上有active类，且其他项的active已移除 - 不要依赖
click事件手动增删 class，优先用官方 API：document.querySelector('[href="#profile"]').click()或bootstrap.Tab.getInstance(el).show() - 如果用了自定义事件监听，记得在
shown.bs.tab回调里检查.nav-link.active是否真实存在 —— 某些动态渲染场景下，DOM 更新可能滞后
.nav-pills.flex-column 当作一个整体组件来用，别拆开改。 
