真可用的响应式垂直导航菜单必须拆成两套结构：桌面端用.nav-pills.flex-column+col-md-3，移动端用offcanvas完全移出文档流；只靠栅格类或d-none d-sm-block会留下DOM占位、键盘焦点跳过、屏幕阅读器误读等硬伤。
真可用的响应式垂直导航菜单必须拆成两套结构：桌面端用 .nav-pills.flex-column + col-md-3，移动端用 offcanvas 完全移出文档流；只靠栅格类或 d-none d-sm-block 会留下 dom 占位、键盘焦点跳过、屏幕阅读器误读等硬伤。
为什么不能直接用 .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> 插入每个 <li class="nav-item"> 内部，不依赖 Bootstrap dropdown JS，用轻量 JS 控制 show/hide：
- 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)中设为display: block实现桌面端常开 - 移动端点击一级项时，只
toggle对应.submenu，并用e.stopPropagation()阻止事件冒泡到外层容器（否则触发 Pills 的 tab 切换或意外收起） - 监听逻辑建议用原生 JS：
document.addEventListener('click', e => { if (e.target.matches('.nav-link')) { e.target.nextElementSibling?.classList.toggle('show'); e.stopPropagation(); } });
移动端必须用 offcanvas 而不是视觉隐藏
col-md-3 d-none d-sm-block 这种写法只是视觉隐藏，DOM 仍渲染、仍占空间、仍可被 tab 键聚焦。实际问题包括：
- 主内容区滚动错乱（
.row高度被隐藏的列拉高） -
offcanvas触发后背景遮罩不显示（d-none干扰了aria-hidden切换） - 双指缩放时意外触发横向滚动（隐藏列仍参与 layout flow）
- 屏幕阅读器持续朗读菜单项，违反 WCAG 可访问性要求
正确做法是：移动端用独立 <div class="offcanvas offcanvas-start d-lg-none"> 包裹整套垂直导航，触发按钮放在 navbar 或主内容顶部，且 <code>offcanvas 容器不能加自定义类如 sidebar，尤其不能带 position: relative、float 或 width —— 这些会直接覆盖 Bootstrap 的 transform 渲染逻辑。
桌面端固定侧边栏容易崩的几个关键点
给侧边栏容器加 position: sticky; top: 0; 是常见选择，但 iOS Safari 中 sticky 常静默失效，原因往往是父容器（如 .row）设了 overflow: hidden 或 transform（offcanvas、navbar-sticky-top 都会触发）。更稳妥的路径是：
- 降级为
position: fixed; start-0 top-0 h-100，同时主内容区加ms-md-3（不能只靠col-md-9）腾出安全间距 - 外层容器加
m-0 p-0清掉.container-fluid和.row的默认边距，否则fixed定位偏移 - 侧边栏内部菜单过长时，加
overflow-y-auto，别指望父容器自动截断 - 在
@media (max-width: 768px)下移除fixed或sticky，还原为普通块级元素，避免与offcanvas冲突
多级菜单展开必须用 collapse，别碰 dropdown —— 后者依赖 position: absolute，会导致子菜单跑到右上角、滚动时脱离、无法对齐侧边栏宽度。
