应使用 .nav-pills.flex-column 实现垂直导航，.nav-tabs 不支持垂直布局，.nav-stacked 已废弃；结构上 <nav> 与 <div class="tab-content"> 必须同级并列于 .d-flex 容器内；移动端需用 offcanvas 替代 d-none。
直接用 .nav-pills.flex-column，别碰 .nav-tabs
Bootstrap 5 不支持对 .nav-tabs 直接加 flex-direction: column —— 这会破坏下划线定位、激活边框贴合、内部间距，且无法响应点击状态。真正能垂直又可靠的，是 .nav-pills 配合 .flex-column。它原生适配垂直流：每个 .nav-link 自动撑满宽度、圆角背景居中、上下间距合理，不需要额外 CSS 覆盖。
.nav-stacked 已废弃，别再用
Bootstrap 4 起就移除了 .nav-stacked 类，所有文档和源码里都找不到它。如果在代码里写了 class="nav nav-pills nav-stacked"，它不会报错但也不会生效——样式完全依赖默认的水平排列。必须显式加上 .flex-column 才能触发垂直布局。
结构必须是独立 <nav> + 同级 <div class="tab-content">
如果你打算让垂直胶囊导航联动内容区（比如点击“产品”显示产品列表），注意：.tab-content 不能嵌套在 <nav> 里面，必须和 <nav> 并列，共同包裹在 <div class="d-flex"> 中：
<div class="d-flex">
<nav class="nav nav-pills flex-column">
<a class="nav-link active" data-bs-toggle="tab" href="#home">首页</a>
<a class="nav-link" data-bs-toggle="tab" href="#about">关于</a>
</nav>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">首页内容</div>
<div class="tab-pane fade" id="about">关于内容</div>
</div>
</div>
否则 data-bs-toggle="tab" 会失效，或者内容区塌陷、错位。
移动端要彻底移出 DOM，不是隐藏
只加 d-none d-lg-flex 是危险的：DOM 仍在、键盘焦点可抵达、屏幕阅读器会朗读、主内容区滚动可能异常。真实项目中，移动端应改用 <div class="offcanvas offcanvas-start d-lg-none"> 包裹整套垂直导航，并配一个独立触发按钮。这样既符合可访问性要求（aria-hidden 正确切换），又避免触控冒泡导致菜单意外关闭。
容易被忽略的是：offcanvas 容器不能加自定义类名如 sidebar，尤其不能覆盖其 position 或 z-index，否则遮罩层或动画会失效。
