Bootstrap如何实现响应式的垂直导航菜单（侧边栏模式）-Bootstrap教程-PHP中文网

真可用的响应式垂直导航菜单必须拆成两套结构：桌面端用.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，二级菜单作为独立

插入每个

内部，不依赖 Bootstrap dropdown JS，用轻量 JS 控制 show/hide：

HTML 结构必须严格：
产品Web
初始隐藏二级菜单：.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 键聚焦。实际问题包括：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

主内容区滚动错乱（.row 高度被隐藏的列拉高）
offcanvas 触发后背景遮罩不显示（d-none 干扰了 aria-hidden 切换）
双指缩放时意外触发横向滚动（隐藏列仍参与 layout flow）
屏幕阅读器持续朗读菜单项，违反 WCAG 可访问性要求

正确做法是：移动端用独立

 包裹整套垂直导航，触发按钮放在 navbar 或主内容顶部，且 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，会导致子菜单跑到右上角、滚动时脱离、无法对齐侧边栏宽度。