navbar-expand类不控制宽高，仅管理响应式折叠；全屏需用position-fixed、w-100、h-100等工具类强制覆盖，并确保父容器无padding/margin、移除container包裹、添加z-index及滚动锁定。
为什么 navbar-expand 类不能直接撑满全屏
Bootstrap 的 navbar 默认是“收缩式”设计，navbar-expand-md 这类类名只控制响应式断点下的折叠/展开行为，并不负责高度或宽度占满视口。很多人加了 h-100 或 w-100 仍失败，是因为父容器（比如 、<div class="container">）本身没占满，或者 <code>navbar 被包裹在带 padding/margin 的容器里。
-
navbar是 inline-flex 容器，高度默认由内容撑开，不是 viewport 高度 - 移动端下
navbar-collapse默认是display: none，需手动触发显示逻辑 - Bootstrap 5+ 移除了
navbar-fixed-top等旧类，改用position-sticky或position-fixed手动控制定位
如何让菜单真正全屏（宽 + 高）
核心是绕过 navbar 的默认尺寸限制，用 utility class 强制覆盖，并确保层级和定位正确。
- 给
nav元素加position-fixed w-100 h-100 top-0 start-0，脱离文档流并铺满整个视口 - 内部
ul.navbar-nav改为d-flex flex-column justify-content-center align-items-center h-100，垂直居中 + 垂直排列 - 必须加
z-index（如z-3），否则会被其他元素遮挡；Bootstrap 5 的z-*工具类从 0 到 4，z-3通常够用 - 移除所有外层
container或container-fluid包裹，它们自带 max-width 和 padding，会破坏全屏效果
示例结构片段：
<nav class="navbar navbar-dark bg-dark position-fixed w-100 h-100 top-0 start-0 z-3"><ul class="navbar-nav w-100 h-100 d-flex flex-column justify-content-center align-items-center">
<li class="nav-item"><a class="nav-link text-white" href="#">首页</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">关于</a></li>
</ul></nav>
点击按钮展开/收起全屏菜单的 JS 关键点
Bootstrap 自带的 data-bs-toggle="collapse" 不适用于全屏场景——它只控制 max-height 动画，而全屏菜单需要 opacity、visibility 和 transform 配合才能流畅进出。
- 别依赖
data-bs-toggle，直接用原生 JS 控制classList.toggle() - 给
nav加初始opacity: 0; visibility: hidden;，再通过 class 切换opacity-100 visible和transition - 移动端需禁用 body 滚动：菜单打开时加
document.body.style.overflow = 'hidden'，关闭时恢复 - 记得监听
Escape键：菜单打开状态下按 ESC 应自动关闭
移动端适配与容易被忽略的细节
全屏菜单在 iOS Safari 和部分安卓 WebView 下容易出问题，不是样式写错，而是交互链路没闭环。
- 菜单内链接点击后，必须主动关闭菜单（比如加
onclick="closeMenu()"），否则用户点完还在全屏状态 - 如果用了
position-fixed，iOS 上可能出现输入框聚焦时页面上滑、菜单错位，临时解法是加viewportmeta： -
navbar-brand在全屏模式下建议隐藏（d-none d-lg-block），否则和菜单项挤在一起 - 动画时间统一用
.2s，太慢显得卡顿，太快用户反应不过来
最常漏掉的是滚动锁定和 ESC 关闭——这两个点不处理，用户会觉得菜单“粘住”了，体验直接降级。
