navbar不支持纵向排列，应改用侧边栏模式：桌面端用.nav-pills.flex-column配合.col-md-3，移动端用.offcanvas实现响应式收放，避免嵌套于.navbar内。
Navbar 本身不支持纵向排列，得换结构
Bootstrap 的 .navbar 是为水平布局设计的容器，内部依赖 .navbar-nav 的 flex-row 行为。强行给它加 flex-column 会破坏折叠逻辑、汉堡菜单定位、下拉锚点和响应式断点，最终导致移动端菜单错位或完全不可用。
真正可行的方案是：放弃把整个 .navbar 纵向化，改用侧边栏（sidebar）模式——用 .nav-pills.flex-column 替代导航主体，再配合栅格或 offcanvas 实现响应式收放。
- 桌面端：把
.nav-pills.flex-column放在.col-md-3里，内容区放.col-md-9 - 移动端：必须用
.offcanvas完全移出文档流，不能只靠d-none d-md-block隐藏 - 别把
.nav-pills.flex-column塞进.navbar或.navbar-collapse里，它们的 flex 上下文冲突
垂直导航必须用 .nav-pills.flex-column，不是 .nav-tabs
.nav-tabs 的样式（如下划线、激活边框贴底）全部基于水平主轴设计，加 flex-column 后下划线会跑到左边、激活态边框错位、justify-content 对齐失效。Bootstrap 官方明确推荐用 .nav-pills 配合 .flex-column 实现垂直导航。
-
.flex-column必须加在<ul class="nav nav-pills"></ul>上，不是外层<nav></nav> - 每个导航项必须是
<li class="nav-item"><a class="nav-link">…</a></li>，漏掉.nav-item会导致间距和 flex 布局异常 - 激活态切换依赖
data-bs-toggle="tab"和href="#id"匹配，缺一不可
对齐、宽度和间距容易踩的坑
纵向排列后，align-items-center 控制的是**水平居中**（因为主轴是 vertical，交叉轴就是 horizontal），想让所有项在容器里上下居中，得用 justify-content-center；而 text-center 对导航项宽度没影响，纯属误导。
- 不设宽度时，
.nav-pills.flex-column下的.nav-link会收缩到文字宽度，点击区域极小——必须加min-width: 12rem或用w-100 - 用
ms-auto可让整个垂直导航右对齐，但前提是外层有d-flex，且不能被.navbar的 flex 规则覆盖 - 二级菜单不要嵌套
.dropdown，否则移动端点击一级项会冒泡关闭整个导航；改用轻量 JS +.submenu切换
响应式切换不能只靠 display 类
用 d-none d-md-flex 控制显示/隐藏，只是视觉层面的开关，DOM 仍存在、仍占空间、键盘焦点仍会跳入、屏幕阅读器仍会朗读。这对可访问性和移动端体验是硬伤。
- 桌面端保持
.nav-pills.flex-column在.col-md-3中常驻 - 移动端必须用
<div class="offcanvas offcanvas-start d-lg-none"> 包裹整套导航，并通过按钮触发 <li>offcanvas 内部结构要独立，不能和 <code>.navbar-collapse共享 JS 初始化逻辑
最常被忽略的一点：垂直导航的 DOM 结构必须和 .tab-content 同级并列，哪怕只是视觉上“看起来像在 navbar 里”。一旦嵌套进 .navbar，Popper 锚点、JS 激活态、键盘焦点顺序就全乱了。
