bootstrap 5 的 nav-tabs 默认不支持垂直排列，需用 d-flex 外层包裹、nav 同级并列 tab-content、nav 加 flex-column 和显式 width、nav-link 设 text-align:center+width:100%、tab-content 加 flex-grow-1。
Bootstrap 5 的 nav-tabs 默认不支持垂直排列
直接套用 nav-tabs 类，无论加 flex-column 还是 flex-md-column，tab 项始终横排——因为 Bootstrap 5 的 .nav-tabs 内部强制设了 flex-direction: row，且未提供 nav-tabs-vertical 这类内置变体。这不是 bug，是设计取舍：官方把垂直布局交由开发者通过结构 + CSS 控制，而非封装进 JS 或预设类。
常见错误是只改 flex-direction，结果 nav 容器塌缩、文字换行、点击区域偏移、tab-content 不对齐。根本原因是没同步处理三件事：容器尺寸流、子项宽高继承、内容区定位关系。
必须用 d-flex 外层包裹 + 同级并列结构
垂直 tab 的 HTML 结构不能是 <nav><ul>...</ul>
<div class="tab-content">...</div></nav>，这种嵌套会让 tab-content 被 flex 布局忽略，导致它不随 nav 同步高度、也不响应宽度约束。
正确结构必须是：
<div class="d-flex">
<nav class="nav flex-column nav-tabs" style="width: 12rem;"><li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#home">首页</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#profile">资料</a></li>
</nav><div class="tab-content flex-grow-1">
<div class="tab-pane fade show active" id="home">首页内容</div>
<div class="tab-pane fade" id="profile">资料内容</div>
</div>
</div>
-
nav必须加flex-column和显式width（如12rem），否则它会收缩到最小内容宽，文字挤成一列 -
nav-link需要text-align: center+width: 100%，否则左对齐文字会超出容器或触发换行 -
tab-content必须和nav同级，并加flex-grow-1占满剩余空间；否则它默认是display: block，高度塌陷、滚动错乱 - 移动端慎用：加
d-none d-md-flex到外层d-flex容器，让竖排仅在中屏以上生效
nav-link 间距和对齐容易被 margin 负值干扰
Bootstrap 5 的 nav-tabs 默认靠 margin-bottom: -1px 实现底边线重叠，这个负 margin 是横向排列逻辑的一部分。一旦改成垂直方向，这个值反而会让相邻 nav-link 上下重叠，视觉错乱。
调纵向间距（即 tab 项之间的空隙）应作用于 nav-link 本身，而不是 nav-tabs 容器：
- 加
margin-bottom: 0.5rem比改margin-bottom: -1px更安全，不会破坏边框连续性 - 避免用
padding拉开间距——nav-link内部是inline-flex，粗暴加大 padding 会导致line-height和height不匹配，active 状态下底边线“浮起来” - 如果用了
nav-fill或nav-justified，它们会强制flex: 1，此时加margin可能被压缩失效，得配合min-width: fit-content - 调试时别只盯着
nav-tabs：用浏览器开发者工具往上查，常是父容器（如.card-header或.container）自带的padding在间接撑开间距
别用 nav-stacked，它在 Bootstrap 5 中已废弃
nav-stacked 是 Bootstrap 3/4 的遗留类，Bootstrap 5 官方文档里已移除，CSS 文件中也找不到对应定义。强行写上不会报错，但毫无效果——它既不改 flex-direction，也不影响任何布局属性。
如果你看到老项目或某些博客示例还在用 nav-stacked，那基本是基于旧版本的惯性写法。现在唯一可靠路径就是手动控制 flex-column + 尺寸 + 同级结构。
真正容易被忽略的点是可访问性：垂直 tab 的键盘 tab 键跳转顺序依赖 DOM 流，而 tab-content 如果被塞进 nav 内部，屏幕阅读器可能读不到内容区；另外，nav-link 必须保留 role="tab" 和 aria-controls 属性，这些 Bootstrap JS 会自动补全，但前提是结构合法——也就是外层 d-flex + 同级 tab-content。
