Bootstrap原生不支持响应式垂直多级菜单，因dropdown-menu嵌套超两级即失效；须改用.nav-pills.flex-column主干+手动二级展开+offcanvas移动端隔离。
Bootstrap 原生不支持响应式垂直多级分类菜单——它只保证两级 dropdown-menu 可用，三级及以上在点击、定位、焦点流和移动端触控上全部失效。真要实现「垂直 + 多级 + 响应式」，必须放弃嵌套 dropdown-menu，改用 .nav-pills.flex-column 主干 + 手动二级展开逻辑 + 移动端 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"><a class="nav-link">产品</a><ul class="submenu"><li><a>Web</a></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;，防长文本撑破容器 - 小屏下别信
gap-3，它在flex-column下行为不稳定；改用@media (max-width: 576px) { .nav.flex-column { gap: 1rem; } } - 禁用未激活项时，用
tabindex="-1"+pointer-events: none，而非.disabled——后者会砍掉键盘导航能力 - 二级菜单项若需 hover 效果，仅在
@media (hover: hover) and (pointer: fine)中启用，避免触屏设备误触发
真正难的不是写出三级 DOM，而是让每级在不同设备上都可聚焦、可操作、不闪退、不遮挡——这要求你亲手接管展开逻辑，而不是期待框架兜底。
