Bootstrap原生不支持响应式垂直多级菜单，因dropdown仅初始化一次、移动端点击收起、Popper定位偏移、z-index失控及触控冒泡；须改用.nav-pills.flex-column+手动.submenu显隐+offcanvas隔离移动端。
Bootstrap 原生不支持响应式垂直多级分类菜单——dropdown-menu嵌套到二级就失效，三级完全不可用；真要实现「垂直 + 多级 + 响应式」，必须放弃dropdown组件，改用.nav-pills.flex-column主干 + 手动控制.submenu显隐 + offcanvas隔离移动端。
为什么直接嵌套 dropdown-menu 必然失败
这不是你 HTML 写错了，是 Bootstrap 5 主动限制：
-
data-bs-toggle="dropdown"只被 JS 初始化一次，子级.dropdown-menu里的触发项根本没绑定事件 - 移动端点一下，父级
dropdown立即收起，二级菜单刚弹出来就消失 -
Popper在三级定位时严重偏移，left: 100%不再可靠，z-index层叠失控 - 触控事件冒泡无法拦截，默认行为就是关闭整个下拉链
用 .nav-pills.flex-column + 手动展开的实操要点
把导航主干交给语义清晰的 Pills，二级菜单作为独立 DOM 插入，不依赖 Bootstrap JS：
- HTML 结构必须严格：
<li class="nav-item">产品<ul class="submenu"><li>Web</li></ul></li> -
.submenu初始设display: none，桌面端用@media (min-width: 992px) { .submenu { display: block; } }实现常开 - 移动端点击一级项时，只
toggle对应.submenu，且必须e.stopPropagation()，否则 Pills 自身会切换激活态或意外收起 - 监听建议用原生 JS：
document.addEventListener('click', e => { if (e.target.matches('.nav-link')) { e.target.nextElementSibling?.classList.toggle('show'); e.stopPropagation(); } });
移动端必须用 offcanvas，不能靠 d-none d-lg-block
视觉隐藏不是响应式，而是可访问性灾难：
-
d-none d-lg-block让 DOM 仍在渲染，tab键会跳过隐藏菜单，屏幕阅读器持续朗读 - 隐藏列仍参与布局流，导致主内容区滚动错乱、双指缩放时意外横向滚动
- 正确做法：移动端用独立
<div class="offcanvas offcanvas-start d-lg-none">包裹整套垂直菜单，触发按钮放在顶部导航栏 -
offcanvas的aria-hidden和键盘焦点管理由 Bootstrap 原生保障，无需额外补丁
容易被忽略的细节：文字折行、间距与可访问性
垂直菜单在窄屏下极易因排版失控而不可用：
- 每个
.nav-link加white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，防长文本撑破容器 - 小屏下别硬设
width: 200px，用<div class="col-md-3">天然约束宽度，内容区对应col-md-9 - 二级菜单项若需 hover 效果，仅在
@media (hover: hover) and (pointer: fine)下启用，避免触摸设备误触发 - 点击展开后，焦点未同步移入
.submenu是最隐蔽的问题——键盘用户卡在一级项，无法继续操作
