bootstrap导航栏响应式折叠失效，基本可归因于navbar-expand-*类缺失或错误、data-bs-toggle/data-bs-target属性不匹配、或bootstrap.bundle.min.js未正确加载；三者缺一不可。
Bootstrap 导航栏响应式折叠失效，基本可以断定是 navbar-expand-* 类缺失或写错、data-bs-toggle/data-bs-target 属性不匹配、或 bootstrap.bundle.min.js 没加载成功这三类问题之一——90% 的案例都落在这个范围里。
检查 navbar-expand-* 类是否写对且没被覆盖
这个类不是可选项，而是折叠功能的总开关。漏写、写成 navbar-expand（无后缀）、或后缀和实际断点不一致，都会导致移动端根本不出汉堡图标。
-
navbar-expand-md表示 ≥768px 才展开，小屏自动折叠；若你写了navbar-expand-lg却在 800px 宽度下测试，它依然会折叠 - 别用
navbar-expand简写——它虽等价于navbar-expand-lg，但某些构建工具会过滤掉无后缀类，最终 HTML 里根本不存在 - 打开浏览器开发者工具，选中
.navbar元素，看计算样式里flex-direction在小屏下是不是column；如果不是，说明断点没命中，可能被自定义 CSS 覆盖了，比如写了.navbar { flex-direction: row !important; }
确认 data-bs-toggle 和 data-bs-target 是否严格配对
Bootstrap 5 完全靠这两个属性触发折叠逻辑，拼写、大小写、空格、ID 一致性，缺一不可。写错就静默失效，控制台也不报错，最难排查。
- 按钮上必须是
data-bs-toggle="collapse"，不是data-toggle（这是 Bootstrap 4 的写法，5 里已废弃） -
data-bs-target的值必须带#，且和目标容器的id完全一致：比如data-bs-target="#navbarSupportedContent"对应<div id="navbarSupportedContent"> <li>常见陷阱：<code>id="navbarsupportedcontent"（少了个n）、data-bs-target="#navbarSupportedContent "（末尾多空格）、大小写混用如NavbarSupportedContent -
bootstrap.bundle.min.js必须放在
验证 bootstrap.bundle.min.js 是否正确加载并执行
纯 CSS 不可能实现折叠动画，JS 是刚需。但光引入还不够，顺序和时机错了，照样白搭。
