Bootstrap如何实现响应式的全屏遮罩导航菜单-Bootstrap教程-PHP中文网

全屏遮罩菜单在小屏幕下不触发，需放弃navbar-collapse默认逻辑，改用position-fixed全屏容器+自定义show类控制显隐，并手动绑定toggle/esc关闭、修复overflow和焦点管理。

全屏遮罩菜单在小屏幕下不触发怎么办

bootstrap 默认的 navbar 不会自动变成全屏遮罩式菜单，必须手动干预响应断点和 dom 结构。常见现象是：小屏点击 navbar-toggler 按钮后下拉菜单展开但高度受限、背景没遮罩、滚动穿透仍在——本质是没替换默认下拉逻辑，而是直接复用 dropdown-menu 或 collapse 的原生行为。

关键做法是放弃 navbar-collapse 的默认渲染，改用固定定位的全屏 div 容器承载菜单项，并用 show 类控制显隐。需注意：Bootstrap 5+ 已移除 navbar-toggle 相关 JS，所有切换逻辑必须自己绑定。

确保 navbar-toggler 的 data-bs-target 指向一个自定义 ID（如 #fullscreenNav），而非默认的 .navbar-collapse
全屏容器必须设 position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1055;（高于 modal-backdrop 的 1050）
添加 overflow-y: auto 防止内容过长时无法滚动
务必在遮罩层上加 tabindex="-1" 并监听 keyup.esc，否则键盘用户无法关闭

如何让菜单项垂直居中且撑满视口

单纯用 flex-column 和 h-100 不够——因为父容器高度依赖内容，而视口高度可能被地址栏压缩（尤其 iOS Safari）。正确方式是用 d-flex flex-column justify-content-center align-items-center min-vh-100，再配合 text-center 统一文字对齐。

但要注意：如果导航项较多，居中会导致顶部/底部留白过大。此时应改用 justify-content-start + pt-5 往下推，或用 vh-100 替代 min-vh-100 并设 overflow-y: auto。

避免对 nav-link 设 font-size: 2rem 等绝对值，优先用 fs-4～fs-6 响应式字号类
每个 nav-link 外层建议包一层 my-2 或 py-3，保证点击热区足够大（至少 44×44px）
禁用默认下划线：给 nav-link 加 text-decoration-none

关闭按钮和 ESC 键失效的常见原因

最常踩的坑是：用 btn-close 但没写 data-bs-dismiss="offcanvas"（Bootstrap 5.2+ 推荐用 offcanvas 替代手写遮罩），或者写了却没把按钮放在 offcanvas-header 内——导致事件委托失败。

VPS Bootstrap

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

下载

如果坚持手写遮罩（更轻量、更可控），必须手动绑定关闭逻辑：

document.getElementById('fullscreenNav').addEventListener('click', e => {
  if (e.target === e.currentTarget) hideNav();
});
document.addEventListener('keydown', e => {
  if (e.key === 'Escape' && document.body.classList.contains('nav-open')) hideNav();
});

不要用 display: none 切换遮罩，会导致 transition 失效；改用 opacity + visibility + pointer-events
关闭时记得恢复 body 的 overflow（设为 auto），否则页面会卡死在滚动锁定状态
移动端需额外处理 touchmove 事件：在遮罩层上 e.preventDefault()，防止误触背景滚动

兼容旧版 Bootstrap 4 的注意事项

Bootstrap 4 没有 offcanvas 组件，也缺少 min-vh-100 这类工具类。必须手动补全：

用 height: 100vh 替代 min-vh-100，并加 @supports (height: 100dvh) 规则适配 iOS 16+ 的动态视口单位
JS 关闭逻辑要兼容 jQuery：$('[data-toggle="fullscreen-nav"]').on('click', hideNav)
动画依赖 transition: opacity .3s, visibility .3s，不能只靠 fade 类（它只控制 opacity）
遮罩背景色别用 bg-dark（太深），推荐 bg-black bg-opacity-75，兼顾可读性与遮蔽度