Bootstrap 5 的 nav-pills 本身不支持左右分栏布局，必须用外层 d-flex 容器包裹 flex-column 的 nav-pills 和同级 tab-content，并设置宽度、对齐及高度约束以避免抖动和错位。
Bootstrap 5 中 nav-pills 无法左右排列？
默认的 nav-pills 是水平居中或左对齐的行内元素，它本身不支持“左侧竖排 + 右侧内容”这种左右分栏布局。你看到的“左右排列”，其实是靠外层 Flex 容器手动拆分出来的，并非 nav-pills 自带能力。
常见错误是直接给 .nav-pills 加 flex-direction: column，结果 pill 文字换行、高度塌陷、点击区域偏移——因为 nav-pills 的样式没为垂直流做适配，比如 border-radius 和 margin 在列方向会错位。
- 别改
.nav-pills本身的 display 或 flex 属性，它只适合行内使用 - 左右结构必须用外层
<div class="d-flex"> 包裹 <code><ul class="nav nav-pills flex-column"></ul>和<div class="tab-content"> <li> <code>flex-column要加在<ul></ul>上，不是<nav></nav>或外层容器上 - 确保
tab-content和nav是同级兄弟节点，不能嵌套 - 给
<ul class="nav nav-pills flex-column"></ul>加width: 12rem（或min-width: 12rem） - 每个
<li>内的<a class="nav-link"></a>要设text-align: center和width: 100%，否则文字左对齐会撑宽 pill - 避免用
nav-fill或nav-justified，它们只对 row 有效，column 下会失效甚至破坏布局 - 如果用
active状态高亮，注意border-start类（如border-start-primary）比纯背景色更符合垂直视觉流 -
tab-content必须和nav并列放在同一个d-flex容器里，不能包在nav里面 - 给
tab-content设flex: 1或min-height: 300px，防止空内容时塌缩 - 所有
tab-pane加fade show（即使只有一个 active），否则首次切换可能闪一下 - 如果内容含图片或异步加载，加
height: 100%到tab-content并设overflow-y: auto防止撑破容器 - 用
d-none d-md-flex控制左侧 pills 容器仅在md及以上显示 - 小屏下改用原生
nav-tabs横排，或用 Collapse + Button 手动模拟折叠菜单 - 别试图用媒体查询强行保持 vertical，
@media (max-width: 768px)里把flex-column改回flex-row会导致 DOM 重排抖动 - 如果业务强依赖小屏 vertical，优先考虑用
accordion替代，语义更清晰、可访问性更好
如何让 pills 靠左竖排并控制宽度
竖排 pills 的关键不是“怎么让 pills 垂直”，而是“怎么让 pills 容器固定宽度 + 垂直排列 + 内容不溢出”。nav-pills 默认没有宽度约束，flex-direction: column 后它会收缩到最窄文字宽，导致文字挤成多行。
tab-content 怎么和 pills 对齐不抖动
竖排 pills 最容易出现内容区“跳动”或“高度忽大忽小”，本质是 tab-content 没被约束高度，且切换时内部元素重绘引发 reflow。这不是 JS 问题，是 CSS 尺寸链断裂。
移动端要不要保留垂直 pills？
竖排 pills 在小屏上体验极差：手指点选精度低、横向空间被大量占用、滚动成本高。Bootstrap 官方也从没推荐过小屏用 vertical pills。
真正难的不是写几行 CSS 让 pills 竖起来，而是判断什么时候不该竖——比如当 pill 文字长度不一、图标尺寸不统一、或者 tab-pane 内容高度差异大时，vertical 布局的维护成本会指数上升。先想清楚“为什么必须竖”，再动手改样式。
