Bootstrap导航栏怎么实现全屏遮罩式菜单-Bootstrap教程-PHP中文网

点击汉堡图标菜单不展开，需检查按钮是否设置data-bs-toggle="offcanvas"且data-bs-target与offcanvas容器id完全匹配，目标元素必须含class="offcanvas offcanvas-start"等方向类，不可用旧版collapse写法。

bootstrap导航栏怎么实现全屏遮罩式菜单

点击汉堡图标后菜单不展开？检查 `data-bs-toggle` 和 `data-bs-target` 是否匹配

Bootstrap 5 的全屏遮罩式菜单本质是 offcanvas 组件，不是传统 collapse。很多人沿用旧版写法，给按钮加 data-toggle="collapse"，结果点不动——这是最常见卡点。

必须使用 offcanvas 对应的属性：

按钮需带 data-bs-toggle="offcanvas"
同时指定 data-bs-target="#myOffcanvas"（ID 必须与 offcanvas 容器的 id 一致）
确保目标元素有 class="offcanvas offcanvas-start"（offcanvas-start 实现从左滑入；若要全屏覆盖，建议用 offcanvas-top 或自定义样式）

怎么让 offcanvas 菜单真正“全屏遮罩”？别只靠默认 class

Bootstrap 默认的 offcanvas 有固定宽度（如 offcanvas-start 宽 400px），且背景半透明但不遮住整个视口。要实现视觉上真正的全屏覆盖+遮罩，得微调 CSS：

给 offcanvas 容器加 style="width: 100vw; height: 100vh; top: 0; left: 0;"
覆盖默认背景色：background-color: #000; 或 rgba(0,0,0,0.95)
移除边框：border: none;
关键：给内部 .offcanvas-body 设置 padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); 适配刘海屏

示例结构片段：

Bootstrap

Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

下载

<div class="offcanvas offcanvas-top" id="myOffcanvas" style="width: 100vw; height: 100vh; top: 0; left: 0; background-color: rgba(0,0,0,0.95); border: none;">
  <div class="offcanvas-body p-0">
    <nav class="d-flex flex-column h-100">...</nav>
</div>
</div>

移动端点击菜单项后自动关闭？手动触发 `hide` 方法

默认情况下，点击 offcanvas 内部链接不会自动关闭面板——用户点完还得再点一次 X 或空白处，体验断裂。

给每个导航链接加 class="nav-link"（或任意可选中类）
在 JS 中监听点击，调用 bootstrap.Offcanvas.getInstance(...).hide()
注意：必须等 DOM 加载完再初始化实例，否则 getInstance 返回 null

简短 JS 示例：

document.addEventListener('DOMContentLoaded', () => {
  const offcanvas = document.getElementById('myOffcanvas');
  const myOffcanvas = bootstrap.Offcanvas.getInstance(offcanvas);
  document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', () => myOffcanvas.hide());
  });
});