Bootstrap 5 默认不支持垂直 Tabs，需通过 CSS 覆盖 flex-direction: column、设置 nav 宽度、确保 tab-content 与 nav 同级并列于 d-flex 容器中，并注意可访问性与高度抖动问题。
Bootstrap 5 默认不支持垂直 Tabs，得自己改 CSS
bootstrap 5 的 nav-tabs 类只定义了水平布局（flex-direction: row），没有内置垂直方向的变体。直接套用默认类，选项卡始终横排，左侧内容区也不会自动对齐。想让 tabs 竖着靠左，必须覆盖其 flex 排列方式和尺寸逻辑。
常见错误是只改 flex-direction: column，但忽略 nav 容器宽度、nav-link 的宽高继承、以及 tab-content 的定位关系，结果出现文字换行、点击区域错位、内容区塌陷等问题。
- 给
nav容器加flex-column并设固定宽度（如width: 12rem），否则它会收缩到最小内容宽 -
nav-link需设text-align: center和width: 100%，避免文字左对齐挤出容器 -
tab-content必须和nav同级、并列包裹在同一个flex容器里，不能嵌套在nav内部 - 移动端要考虑折叠：加
d-none d-md-flex控制竖排仅在中屏以上生效
用 Flex 布局手动拼出左侧垂直 Tabs 结构
不要依赖第三方插件或重写整个 Bootstrap JS，核心是用原生 nav + tab-content，通过外层 div.d-flex 控制左右分栏。结构必须是：<div class="d-flex">
<nav>...</nav><div class="tab-content">...</div>
</div>。任何把 tab-content 放进 nav 里的写法都会破坏渲染流。
示例关键 HTML 片段：
<div class="d-flex">
<nav class="nav nav-pills flex-column me-3 border-end" style="width: 12rem;"><a class="nav-link active" data-bs-toggle="tab" href="#home">首页</a>
<a class="nav-link" data-bs-toggle="tab" href="#profile">档案</a>
</nav><div class="tab-content p-3 flex-grow-1">
<div class="tab-pane fade show active" id="home">首页内容</div>
<div class="tab-pane fade" id="profile">档案内容</div>
</div>
</div>
-
me-3提供右侧间距，border-end加分割线，视觉更清晰 -
flex-grow-1让内容区占满剩余宽度，避免固定宽导致响应问题 - 所有
data-bs-toggle="tab"和href/id匹配必须严格一致，大小写、符号都不能错，否则切换失效
Tab 切换时内容区高度抖动？检查 padding 和 min-height
垂直 Tabs 下，不同 tab-pane 内容高度差异大时，tab-content 容器会随内容伸缩，造成页面跳动。这不是 JS bug，而是 CSS 未锁定高度行为。
- 给
tab-content加min-height: 200px（按需调整），防止过短内容塌陷 - 避免在
tab-pane内直接设height，会导致 overflow 裁剪；优先用min-height+overflow-y-auto - 如果用了卡片（
card）包装内容，注意card-body的padding是否在不同 tab 中不一致——统一设为p-3可减少跳动感 - 动画开启时（
fade类），确保父容器有明确高度，否则opacity过渡会因布局重排而卡顿
Bootstrap 4 用户注意：nav-stacked 已废弃
Bootstrap 4 早期文档里提过 nav-stacked，但它在 v4.1 就被移除了，现在所有版本都不识别这个类。别在代码里留着 class="nav-stacked"，它不会生效，还会干扰调试判断。
如果你从旧项目迁移，或者搜到带这个类的教程，一律替换成 flex-column + 显式宽度控制。另外，nav-tabs 和 nav-pills 在垂直场景下表现一致，选哪个纯看样式偏好——nav-pills 圆角更适合作侧边导航，nav-tabs 的下划线反而容易和左侧布局冲突。
真正难的是在复杂布局里保持垂直 Tabs 的可访问性：比如用键盘 Tab 键聚焦时，焦点顺序是否仍符合视觉流；屏幕阅读器能否正确 announce 当前激活 tab。这些细节比样式更易被跳过。
