怎么用Bootstrap制作手机端抽屉式侧边菜单-Bootstrap教程-PHP中文网

应使用 Bootstrap 5.2+ 的 offcanvas 组件实现原生、轻量侧边菜单，因其内置响应式隐藏、多方向滑出、遮罩、ESC关闭及无障碍支持；须将 offcanvas 置于 body 直接子级，配 data-bs-toggle/data-bs-target，添加 aria-controls 和 aria-labelledby 保障可访问性，并通过 CSS 变量或自定义类控制断点与宽度。

怎么用bootstrap制作手机端抽屉式侧边菜单

用 `offcanvas` 组件实现原生、轻量的侧边菜单

Bootstrap 5.2+ 内置了 offcanvas，不用额外 JS 或第三方库就能做手机端抽屉菜单。它默认响应式隐藏，触发后从左/右滑出，动画流畅且语义清晰。比自己写 transform: translateX() 更可靠，也比依赖 collapse + 手动控制宽度更符合移动端交互直觉。

关键点：

offcanvas 必须放在直接子级，否则 backdrop 遮罩层可能错位或不触发关闭
默认从左侧展开，加 class="offcanvas-end" 可改为右侧；加 class="offcanvas-bottom" 是底部弹出（适合操作面板，非典型侧边菜单）
必须手动添加 data-bs-toggle="offcanvas" 和对应 href 或 data-bs-target，Bootstrap 不会自动绑定按钮和菜单

HTML 结构要满足 ARIA 可访问性要求

单纯能动不算完成——屏幕阅读器用户需要明确知道菜单状态、角色和控制方式。Bootstrap 的 offcanvas 默认已含 role="dialog" 和 aria-modal="true"，但你得补全两处：

触发按钮必须有 aria-controls="your-offcanvas-id"，指向菜单容器 ID
菜单容器需有 aria-labelledby 指向其标题元素 ID（例如 菜单）
如果菜单里有链接，建议用包裹，并加 aria-label="主菜单"

漏掉这些，offcanvas 虽然视觉上工作正常，但 WCAG 2.1 AA 级别会失败。

自定义宽度和断点容易踩的坑

默认 offcanvas 在 md（768px）以上就自动隐藏，变成“常驻”状态——这不符合“手机端抽屉”的本意。你需要覆盖它的媒体查询逻辑：

VPS Bootstrap

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

下载

不要直接改 Bootstrap CSS 文件，而是用自定义类，比如 offcanvas-sm，并在 CSS 中重写 @media (min-width: 576px) 下的 display: none
调整宽度时，别只改 width，还要同步修改 max-width 和 transform 的临界值（如 translateX(-100%) → translateX(-300px)），否则动画偏移错位
若需固定宽度（如 280px），推荐用 style="--bs-offcanvas-width: 280px;"，这是 Bootstrap 5.3+ 提供的 CSS 变量接口，比覆盖 class 更干净

关闭后焦点未回传到触发按钮的问题

用户点击菜单内链接跳转，或按 Esc 关闭后，焦点常丢失在 body 上，导致键盘用户必须 Tab 很多次才能回到顶部导航。这不是 Bug，是默认行为缺失。

解决方法很简单，在初始化后手动监听 hidden.bs.offcanvas 事件：

const myOffcanvas = document.getElementById('mobileMenu')
myOffcanvas.addEventListener('hidden.bs.offcanvas', () => {
  document.getElementById('menuToggleBtn').focus()
})

注意：这个按钮必须是可聚焦元素（button 或带 tabindex="0" 的元素），且不能被 display: none 隐藏。

真机测试时最容易忽略的是 backdrop 点击穿透——如果菜单里用了 position: fixed 的下拉或浮层，它们可能盖在 backdrop 上，导致点不到遮罩关闭菜单。这时候要么提升 z-index，要么改用 position: absolute 配合父容器 overflow 控制。