Bootstrap不支持响应式垂直多级导航，因原生仅限两级下拉且垂直Pills无嵌套能力；需用.nav-pills.flex-column搭配手动二级展开逻辑与移动端折叠控制，避免dropdown嵌套失效及触控冒泡问题。
bootstrap 本身不支持响应式垂直多级分类导航——它只原生支持两级下拉（dropdown），且垂直 pills（.nav-pills.flex-column）不带嵌套菜单能力。真要实现「垂直 + 多级 + 响应式」，必须组合使用 pills 结构 + 自定义二级展开逻辑 + 移动端折叠控制，不能靠开箱即用。
为什么不能直接用 .nav-tabs.flex-column 或嵌套 .dropdown-menu
强行给 .nav-tabs 加 flex-direction: column 会破坏下划线定位、激活边框贴合和间距；而 Bootstrap 5 的 .dropdown-menu 嵌套在另一个 .dropdown-menu 内时，子项的 data-bs-toggle="dropdown" 不会被 JS 初始化，点击后整个父级 dropdown 立即收起，二级菜单根本打不开。移动端尤其明显：触控事件冒泡导致“点一下就全关”。
用 .nav-pills.flex-column 搭配手动二级展开（推荐方案）
把垂直导航主干交给 .nav-pills.flex-column，二级菜单作为独立 <ul class="submenu"></ul> 插入每个 .nav-item 内部，不依赖 Bootstrap dropdown JS，用轻量 JS 控制 show/hide。
- HTML 结构必须严格：
<li class="nav-item"><a class="nav-link" href="#">产品</a><ul class="submenu"><li><a href="#">Web</a></li></ul></li> - 初始隐藏二级菜单：
.submenu { display: none; }，并在@media (min-width: 992px)中设为display: block实现桌面端常开 - 移动端点击一级项时，只 toggle 对应
.submenu，并阻止事件冒泡到外层容器（否则触发 Pills 的 tab 切换或意外收起） - 用
document.addEventListener('click', ...)监听，配合e.target.matches('.nav-link')和e.target.nextElementSibling?.classList.toggle('show')，避免引入 jQuery 或额外插件
响应式断点与宽度控制的关键细节
垂直导航在小屏上容易撑破容器或文字折行难读，不能靠 width: 200px 硬设。
- 用栅格包裹：
<div class="col-md-3"><ul class="nav nav-pills flex-column">...</ul></div>，内容区对应col-md-9，天然适配中屏以上 - 窄屏（
xs）下建议收起整个导航，用按钮触发 offcanvas：data-bs-toggle="offcanvas"+offcanvas-start，而不是强塞二级菜单进屏幕 - 每个
.nav-link加white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防止长文本破坏布局 - 二级菜单项若需 hover 效果，仅在
@media (hover: hover)下启用，避免触摸设备误触发
最易被忽略的是：二级菜单的 position 必须设为 static 或 relative，不能用 absolute —— 否则在 flex-column 布局里会脱离文档流、被裁剪或错位。另外，所有 .nav-link 必须有唯一 href（哪怕只是 #），否则 Pills 的 JS 激活逻辑可能失效。
