90% 是 JS 依赖缺失或属性命名错误；必须用 data-bs-toggle="collapse" 和 data-bs-target="#id"（ID严格匹配），并确保 bootstrap.bundle.min.js 已正确加载且 DOM 就绪。
导航栏响应式按钮（汉堡图标）没反应，90% 是 JS 依赖缺失或属性命名错误，不是 HTML 写错了。
检查 data-bs-toggle 和 data-bs-target 是否带 bs- 前缀
Bootstrap 5+ 彻底废弃了 data-toggle 和 data-target，必须用带 bs- 的新命名。浏览器对旧写法完全静默忽略，不报错也不生效。
- ❌ 错误写法：
data-toggle="collapse" data-target="#navbarNav" - ✅ 正确写法：
data-bs-toggle="collapse" data-bs-target="#navbarNav" - 确保
data-bs-target的值与目标容器的id完全一致（大小写、连字符、空格都不能差） - 如果用了自定义 ID（比如
id="myNavbar"），data-bs-target必须同步改成"#myNavbar"
确认 bootstrap.bundle.min.js 已加载且无冲突
折叠功能完全依赖 JavaScript，仅引入 CSS 是无效的。而且 Bootstrap 5 不再需要 jQuery，但必须有 Popper 支持——bootstrap.bundle.min.js 已内置，别额外引入。
- ✅ 推荐只加这一行（放在
</body>前）：<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/js/bootstrap.bundle.min.js"></script> - ❌ 删掉所有其他 JS 引入：单独的
popper.min.js、bootstrap.min.js、jquery.min.js - 打开浏览器开发者工具 → Console 标签页，看是否有
Uncaught ReferenceError: bootstrap is not defined或Failed to load resource—— 这说明 JS 根本没加载成功 - 检查 Network 标签页，确认该 JS 文件状态码是 200，不是 404 或被广告拦截器屏蔽
验证 DOM 结构是否在 JS 执行时已就绪
如果把 <nav> 写在 <head> 里，或者 JS 在 <body> 开头就执行，而 DOM 还没解析完，data-bs-* 属性就无法被 Bootstrap 初始化。
- 确保
<nav class="navbar">...在<body>内部，而不是<head>中 - JS 脚本必须放在
</body>闭合标签前，或用defer属性：<script defer src="..."></script> - 不要手动调用
new bootstrap.Collapse(...)，除非你明确绕过 data 属性初始化——默认行为就是靠 data 属性自动绑定
排查 .dropdown-menu 在折叠状态下被遮挡或溢出
按钮点击后菜单“动了但看不见”，常被误判为没反应。实际是 CSS 定位问题：折叠后 .dropdown-menu 相对于压缩后的 .nav-item 向上展开，超出视口顶部。
- 用开发者工具选中展开后的
.dropdown-menu，看它是否出现在屏幕外（滚动页面可能看到） - 小屏下可加临时修复 CSS：
@media (max-width: 992px) { .dropdown-menu { top: 100% !important; } } - 检查是否误加了
pointer-events: none到.navbar-collapse或其任意父元素 - 避免给
.navbar或.navbar-collapse设置overflow: hidden且高度不足，会直接裁剪下拉区域
最易被忽略的是：控制台没报错 ≠ 功能正常。JS 加载失败、data 属性拼错、ID 不匹配，都会导致静默失效。先开 Console 看有没有 bootstrap is not defined，再逐项核对 data-bs-* 拼写和脚本加载顺序——这两步做完，80% 的“没反应”就解决了。
