navbar-expand类不控制宽高仅管理响应式折叠全屏需用position-fixed、w-100、h-100等工具类强制覆盖并确保父容器无padding/margin、移除container包裹、添加z-index及滚动锁定。为什么 navbar-expand 类不能直接撑满全屏Bootstrap 的 navbar 默认是“收缩式”设计navbar-expand-md 这类类名只控制响应式断点下的折叠/展开行为并不负责高度或宽度占满视口。很多人加了 h-100 或 w-100 仍失败是因为父容器比如 body、div classcontainer本身没占满或者 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 到 4z-3 通常够用移除所有外层 container 或 container-fluid 包裹它们自带 max-width 和 padding会破坏全屏效果示例结构片段nav classnavbar navbar-dark bg-dark position-fixed w-100 h-100 top-0 start-0 z-3 ul classnavbar-nav w-100 h-100 d-flex flex-column justify-content-center align-items-center li classnav-itema classnav-link text-white href#首页/a/li li classnav-itema classnav-link text-white href#关于/a/li /ul/nav点击按钮展开/收起全屏菜单的 JS 关键点Bootstrap 自带的 data-bs-togglecollapse 不适用于全屏场景——它只控制 max-height 动画而全屏菜单需要 opacity、visibility 和 transform 配合才能流畅进出。 Cleanup.pictures 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西