Bootstrap 5 垂直排列 nav-pills 必须添加 flex-column 类，同时需配合固定宽度（如 w-100 或 style="width:12rem"）、外层 d-flex 布局及并列的 tab-content，禁用 nav-stacked、nav-fill 等冲突类，并注意可访问性与点击热区优化。
nav-pills 垂直排列必须加 flex-column 类
bootstrap 5 的 nav-pills 默认是水平排列（flex-direction: row），不加任何类就不可能竖着排。直接写 <ul class="nav nav-pills"></ul>，无论里面有多少 <li>，它都横着铺开。
正确做法是在同一元素上叠加 flex-column：
<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>
-
flex-column是唯一必需的布局类，它覆盖了默认的row方向 - 不要用
nav-stacked—— 这是 Bootstrap 3 的遗留类，5 中已移除，加了也无效 - 如果用了
nav-fill或nav-justified，必须去掉，它们和flex-column冲突，会导致宽度异常或换行错乱
垂直 Pills 需要固定宽度或约束容器
只加 flex-column 后，<ul></ul> 容器会收缩到最窄内容宽（比如“首页”两个字那么宽），导致文字挤在一起、点击区域变小、甚至溢出父容器。
解决方法是显式控制宽度：
- 给
<ul></ul>加style="width: 12rem;"或class="w-100"（若父容器有明确宽度） - 更推荐用工具类组合：
nav-pills flex-column me-3+ 外层d-flex控制整体分栏 - 避免对
nav-link单独设width，应让其继承父级宽度，再用text-center居中文本
tab-content 必须与 nav 并列，不能嵌套
常见错误是把 <div class="tab-content"> 放进 <code><nav></nav> 或 <ul></ul> 里，结果内容区塌陷、切换无反应、高度抖动。
正确结构必须是：外层 d-flex → 左侧 nav + 右侧 tab-content 并列：
<div class="d-flex">
<ul class="nav nav-pills flex-column me-3" style="width: 12rem;">
<li class="nav-item"><a class="nav-link active" href="#home">首页</a></li>
</ul>
<div class="tab-content p-3 flex-grow-1">
<div class="tab-pane fade show active" id="home">首页内容</div>
</div>
</div>
- 漏掉
d-flex外层，左右不会自动分栏，tab-content会换行到下方 -
flex-grow-1让内容区撑满剩余空间，否则可能高度不足、背景留白 - 移动端想隐藏垂直导航？加
d-none d-md-flex到<ul></ul>上，仅中屏以上显示
垂直 Pills 的可访问性与点击热区问题
竖排后，nav-link 默认高度变小，手指或鼠标容易点空；屏幕阅读器也可能因缺少明确方向提示而误读。
- 加
py-2或min-height: 2.5rem确保点击区域足够大 - 每个
nav-link必须有role="tab"和aria-controls属性（data-bs-toggle="tab"会自动补全，但手动写更可控） - 不要依赖
nav-link的默认text-decoration，垂直场景下下划线干扰视觉流，建议加text-decoration-none - 用 DevTools 检查
computed样式里的flex-direction和width，比猜更可靠
垂直 Pills 表面只是加个类，实际成败取决于容器宽度、层级关系、以及是否破坏了 tab 的语义流——这三个地方一错，整个选项卡就不可用。
