导航栏在移动端不显示,大概率是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 必须放在











