手机端导航栏重叠主因是 navbar-collapse 未正确隐藏或初始化，常见于 js 初始化失败、重复加载 bootstrap 脚本、data-bs-target 指向错误、css 强制覆盖 display、navbar-expand-* 类缺失或误用、内联宽度破坏 flex 布局、viewport 设置不当等。
navbar-collapse 没被正确隐藏或初始化
手机端导航栏重叠，最常见原因是 .navbar-collapse 元素没按预期隐藏，导致折叠菜单和主导航栏同时显示。这通常不是 CSS 写错了，而是 JS 初始化失败或状态错乱。
- 检查是否重复加载了
bootstrap.min.js和bootstrap.bundle.min.js—— 两者共存会触发两次 Collapse 初始化，aria-expanded值与实际display状态不一致，视觉上“既没全开也没全关” - 确认
data-bs-target指向的 ID（如#navbarSupportedContent）在 DOM 中真实存在，且没有拼写错误或重复 ID - 用开发者工具查看
.navbar-collapse是否有.show类但display: none仍生效——说明 JS 尝试隐藏却被某处 CSS 强制覆盖（比如自定义样式里写了#navbarSupportedContent { display: block; }）
navbar-expand-* 类缺失或误用
Bootstrap 5 默认不折叠，不是 bug，是设计：没加 navbar-expand-* 类时，导航栏在所有尺寸下都横排显示，根本不会生成汉堡按钮，更谈不上折叠逻辑。
- 漏写
navbar-expand-md（或sm/lg）是手机端无折叠菜单的首要原因；加了navbar-expand（无后缀）则强制所有断点都不折叠，.navbar-toggler会被隐藏，点击无效 - 如果用了
navbar-expand-sm却在 iPhone SE（375px 宽）上测试，它仍属于 “≥576px” 断点，会保持展开——此时需改用navbar-expand-xs（不存在）或降级为navbar-expand-0（需自定义断点） - 注意：v4 的
navbar-toggleable-*已废弃，混用 v4 CSS 会导致.navbar-toggler渲染异常或事件丢失
卡片或子元素宽度破坏了 flex 布局流
导航栏内部若嵌套了固定宽度的元素（比如带 style="width: 200px" 的 .nav-link 或自定义组件），会在小屏下撑破容器，造成文字折行、图标错位、甚至整个 .navbar-nav 溢出后被父容器裁剪，看起来像“重叠”。
- 移除所有内联
width、min-width，让.nav-link依赖 Bootstrap 的flex-shrink: 1自动压缩 - 避免把
.navbar-nav包在未设overflow: hidden的自定义div里——该div若有flex-wrap: wrap，可能让菜单项换行堆叠，但这不是 Bootstrap 折叠，而是布局溢出 - 检查是否意外给
.navbar设了white-space: nowrap，这会阻止文本换行，加剧水平溢出
响应式断点与 viewport 设置不匹配
即使类名写对，如果页面缺少正确 <meta name="viewport">，浏览器会以桌面宽度渲染，导致断点判断失效，navbar-expand-md 在手机上也按桌面逻辑运行。
- 确保
中有：<meta name="viewport" content="width=device-width, initial-scale=1"> - 不要用
maximum-scale=1或user-scalable=no—— 这些会干扰浏览器对视口宽度的判定，使媒体查询失效 - 在 Chrome DevTools 中开启「Device Toolbar」并选中具体机型（如 iPhone 12），而非仅靠缩放窗口测试，否则
window.innerWidth不反映真实断点
真正卡住的问题往往藏在 JS 初始化顺序或 viewport 配置里，而不是 class 名拼错。先看控制台有没有 Bootstrap 相关警告（比如 “No target element found”），再查 .navbar-collapse 的 computed display 和 aria-expanded 是否同步，比反复改 CSS 更快定位。
