Bootstrap原生不支持响应式垂直多级分类菜单，因dropdown-menu嵌套超两级即失效；须改用.nav-pills.flex-column主干+手动二级展开+offcanvas移动端隔离。
Bootstrap 原生不支持响应式垂直多级分类菜单——dropdown-menu 嵌套到二级就失效，三级根本不会初始化事件，点一下父级就收，移动端尤其明显。真要可用，必须放弃嵌套 dropdown-menu，改用 .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 + 手动二级展开怎么写
结构必须语义清晰、DOM 平铺，不依赖 Bootstrap dropdown 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，用col-md-3+col-md-9栅格天然适配中屏以上 - 二级菜单项若需 hover 效果，仅在
@media (hover: hover) and (pointer: fine)下启用，避免触摸设备误触发 - 点击展开后，焦点未同步移入
.submenu，键盘用户无法继续操作——必须手动.focus()或用autofocus属性
真正麻烦的从来不是“怎么让菜单展开”，而是“展开后焦点在哪、屏幕阅读器说什么、双指缩放时会不会横向滚动”。这些点漏掉一个，菜单就算能点开，也算不上可用。
