bootstrap原生不支持响应式垂直多级导航菜单，因dropdown仅初始化一级且嵌套二级无事件绑定；推荐用.nav-pills.flex-column配合手动控制.submenu显隐，并注意触控冒泡、断点适配、可访问性焦点管理。
bootstrap 原生不支持响应式垂直多级分类导航菜单——dropdown 组件只初始化一级 data-bs-toggle="dropdown"，嵌套的二级 .dropdown-menu 内部元素根本不会被 js 绑定事件，点一下就全收，移动端尤其明显。
为什么不能直接用 .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">产品</a><ul class="submenu"><li>Web</li></ul> </li> - 初始隐藏二级菜单：
.submenu { display: none; }，并在@media (min-width: 992px)中设为display: block实现桌面端常开 - 移动端点击一级项时，只
toggle对应.submenu，并阻止事件冒泡：e.stopPropagation()，否则触发 Pills 的 tab 切换或意外收起 - 监听
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) and (pointer: fine)下启用，避免触摸设备误触发
最易忽略的是：移动端点击后，.submenu 展开但焦点未同步移入，键盘用户无法继续操作；务必在 show 后调用 .focus() 到第一个可聚焦子项，否则可访问性直接断裂。
