全屏遮罩菜单在小屏幕下不触发，需放弃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 内——导致事件委托失败。
如果坚持手写遮罩（更轻量、更可控），必须手动绑定关闭逻辑：
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，兼顾可读性与遮蔽度
最易忽略的是焦点管理：全屏菜单打开后，焦点必须移到第一个 nav-link 上，否则屏幕阅读器用户会卡在按钮上；关闭后焦点要回到触发按钮。这点在无障碍要求高的项目里几乎没人做，但却是 WCAG 2.1 强制项。
