Bootstrap 5 导航栏折叠失效主因是 JS 未加载或 data-bs-toggle/data-bs-target 属性错误；必须使用 bootstrap.bundle.min.js、严格匹配 ID（含大小写与空格）、确保 DOM 就绪后初始化。
按钮点击无反应，90% 是 JS 没生效或属性写错，不是 CSS 问题。 Bootstrap 5 的折叠完全依赖 JavaScript 绑定，纯 HTML + CSS 不会动——哪怕结构全对，只要 bootstrap.bundle.min.js 没加载、或 data-bs-toggle 写成 data-toggle，就静默失效，控制台还不报错。
检查 data-bs-toggle 和 data-bs-target 是否写对
这两个属性缺一不可，且命名、大小写、ID 匹配必须严丝合缝：
-
data-bs-toggle必须是"collapse"，写成data-toggle、data-bs-toggle="modal"或漏掉bs-前缀，JS 根本不识别 -
data-bs-target的值必须以#开头，且与目标<div> 的 <code>id完全一致：包括大小写、连字符、末尾空格——data-bs-target="#nav-collapse "（末尾空格）和id="nav-collapse"就不匹配 - 不要用
href="#nav-collapse"替代data-bs-target，Bootstrap 5+ 已废弃该行为 - 必须引入
bootstrap.bundle.min.js（含 Popper），不能只引bootstrap.min.js；若分开引，需先@popperjs/core再bootstrap.min.js，顺序错也会失效 - 脚本标签必须放在
确认 bootstrap.bundle.min.js 已正确加载且 DOM 就绪
折叠是 JS 行为，CSS 文件再全也没用；且它依赖 DOM 元素存在才能初始化：
