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"> - 常见陷阱：
id="navbarsupportedcontent"（少了个n）、data-bs-target="#navbarSupportedContent "（末尾多空格）、大小写混用如NavbarSupportedContent
验证 bootstrap.bundle.min.js 是否正确加载并执行
纯 CSS 不可能实现折叠动画，JS 是刚需。但光引入还不够，顺序和时机错了，照样白搭。
-
bootstrap.bundle.min.js必须放在</body>前，不能只塞在<head>里——否则 DOM 还没解析完，JS 就去绑事件，结果document.getElementById(...)返回null - 别同时引
bootstrap.bundle.min.js和单独的@popperjs/core，会报Popper is already loaded错误 - 打开浏览器控制台，输入
typeof bootstrap，返回"object"才算 JS 加载成功；再试bootstrap.Collapse.getInstance(document.getElementById('navbarSupportedContent'))，有实例返回说明绑定正常
小屏幕下 dropdown-menu 被截断或溢出怎么办
这不是折叠本身失效，而是下拉菜单在垂直堆叠的折叠区域里定位错乱。它常表现为：汉堡点了，菜单展开，但下拉项看不见、点不了、或者从顶部冒出来。
- 根本原因是
.dropdown-menu默认以position: absolute相对于.nav-item定位，而小屏下.nav-item高度压缩或位置偏移，导致下拉项飞出视口 - 简单修复：加一段媒体查询，让折叠后的导航容器变成
position: absolute并锚定在 navbar 下方，同时给.navbar加position: relative - 别用
!important强行改.dropdown-menu的top或transform——容易在不同设备上反复失准，优先调整父容器定位上下文
最常被忽略的是：你以为结构“差不多对”，其实 ID 多了个空格、navbar-expand- 后缀和 viewport 宽度对不上、或者 JS 文件 404 了却没注意控制台红字。动手前，先用浏览器“查看页面源代码”，逐字核对 id 和 data-bs-target 是否完全一致——这是最快定位问题的方式。
