响应式左侧固定导航需桌面端用position-fixed+width控制，右侧用ms-md-3避覆盖；移动端必须用offcanvas（非d-none）保障无障碍，宽度统一css变量，搜索框与二级菜单须内置于offcanvas并用js控制展开。
左侧固定 + 响应式切换：为什么不能只用 col-md-3
直接套 col-md-3 + d-none d-md-block 会让侧边栏在小屏下“视觉隐藏”，但 DOM 仍在、占位仍在、键盘焦点仍在——滚动错乱、屏幕阅读器误读、双指缩放时横向溢出，全是硬伤。真正可用的响应式，必须让移动端菜单彻底脱离文档流。
桌面端固定左侧导航的正确姿势
固定定位不依赖栅格类，.col-* 和 .row 在 position: fixed 下完全失效，强行嵌套只会导致布局塌陷或右侧内容被遮盖。
- 左侧容器加
position-fixed start-0 top-0 h-100（Bootstrap 5 工具类），再用style="width: 260px"或w-25控制宽度 - 右侧内容区必须加
ms-md-3（不是col-md-9），否则大屏下会被左侧覆盖 - 外层容器清掉默认边距：
m-0 p-0，否则position: fixed会因.container-fluid的 padding 偏移 - 左侧内部若菜单过长，加
overflow-y-auto；右侧滚动由自身内容自然触发，无需额外设overflow
移动端收进 offcanvas 而不是隐藏
offcanvas 是 Bootstrap 5 官方推荐路径，它通过 aria-hidden="true" 和 inert 确保屏幕阅读器不可见、键盘不可聚焦，无障碍达标。
- 结构上：用
<div class="offcanvas offcanvas-start d-xl-none"> 包裹整套垂直导航，<code>d-xl-none确保仅在 xl 以下生效 - 宽度定制必须用 CSS 变量：
style="--bs-offcanvas-width: 260px;"，别写width或position: relative - 关闭按钮必须是
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>，手写 × 或 JS 移除 class 都不可靠 - 触发按钮加
d-xl-none，放在 navbar 或顶部工具栏里，避免被 sticky 元素盖住 - 搜索框必须放在
offcanvas内部，作为独立<form></form>塞进<ul class="navbar-nav"></ul>，并加me-2防 iOS viewport overflow - 二级菜单放弃
.dropdown，改用轻量 JS 控制：.submenu { display: none; }+@media (min-width: 1200px) { .submenu { display: block; } } - 移动端点击一级链接时，用
e.stopPropagation()阻止冒泡，否则 Pills 切换或父级收起会干扰展开逻辑 - 监听建议用原生：
document.addEventListener('click', e => { if (e.target.matches('.nav-link')) { e.target.nextElementSibling?.classList.toggle('show'); e.stopPropagation(); } });
搜索框和二级菜单怎么塞进去才不翻车
搜索框如果只写在 navbar 或 row 里，小屏下根本不会渲染；二级菜单若用原生 .dropdown 嵌套，在移动端点击一级项会直接收起整个菜单——因为子项的 data-bs-toggle="dropdown" 不会被初始化。
ms-md-3 必须与左侧宽度严格对齐；offcanvas 的 --bs-offcanvas-width 也得和固定菜单的 width 保持一致，否则断点切换时会出现跳动或遮挡。
