导航栏在移动端不显示，大概率是data-bs-toggle与data-bs-target未配对、JS未加载或DOM元素ID不一致；须确保Bootstrap 5命名规范、JS加载顺序正确、CSS完整引入且ID严格匹配。
导航栏在移动端不显示，大概率不是“没写”，而是 data-bs-toggle 和 data-bs-target 没配对、JS 没加载、或 DOM 元素 ID 不一致 —— 这三处错一个，汉堡图标就彻底失灵。
data-bs-toggle 和 data-bs-target 必须成对更新
Bootstrap 5 彻底废弃了 data-toggle 和 data-target，所有交互组件统一用 data-bs-* 命名空间。旧写法浏览器直接忽略，不会报错，但也不会绑定事件。
-
data-toggle="collapse"→ 必须改成data-bs-toggle="collapse" -
data-target="#navMenu"→ 必须改成data-bs-target="#navMenu" -
aria-controls的值也得同步，比如aria-controls="navMenu"，否则屏幕阅读器和部分 JS 行为可能异常
JS 文件加载顺序和完整性必须检查
折叠是纯 JS 行为，CSS 只管样式和断点。没 JS，再对的 HTML 也是静态图。
- 推荐只引入
bootstrap.bundle.min.js（含 Popper），不要额外加popper.min.js，否则Uncaught Error: Popper is already loaded - JS 必须放在
</body>前，且在bootstrap.min.css之后；DOM 尚未解析完就执行 JS，querySelector会返回null - 打开浏览器控制台，过滤
404或Cannot read property 'addEventListener' of null—— 这类报错基本指向 JS 找不到目标元素
id 和 data-bs-target 必须严格一致
大小写、空格、连字符、前后缀，差一个字符都不行。Bootstrap 的 Collapse 实例靠这个 ID 查找 DOM 节点。
- 检查
<div class="navbar-collapse">是否真有id="navbarSupportedContent" - 检查
data-bs-target的值是否完全匹配，比如"#navbarSupportedContent"≠"#navSupportedContent" - 如果用了构建工具（如 Webpack/Vite），确认 HTML 模板中没被插件自动修改 ID 或移除属性
最容易被忽略的是：CSS 文件缺失或路径错误。折叠菜单默认靠 .collapse 类的 display: none 隐藏，而 .show 类靠 JS 动态添加来显示 —— 如果 bootstrap.min.css 根本没加载，.collapse 就没定义，整个逻辑从视觉层就崩了。
