
bootstrap 5 中 navbar 折叠按钮不响应,通常因使用了 bootstrap 4 的旧版 data 属性(如 `data-toggle`),而 bootstrap 5 已统一改为带 `bs-` 前缀的新属性(如 `data-bs-toggle`),同时需确保正确引入 popper 和 bootstrap js。
在 Bootstrap 5 中,JavaScript 插件的 DOM 属性命名已全面升级为带 data-bs-* 前缀的格式,这是与 Bootstrap 4 最关键的兼容性变更之一。若你沿用旧写法(如 data-toggle="collapse" 或 data-target="#nav"),浏览器将无法识别并绑定事件,导致移动端导航菜单点击无反应。
✅ 正确写法(Bootstrap 5):
⚠️ 常见错误排查清单:
- ❌ 使用 data-toggle / data-target → ✅ 必须改为 data-bs-toggle / data-bs-target
- ❌ 仅引入 bootstrap.min.js → ✅ 必须先引入 Popper.js(或使用 bootstrap.bundle.min.js,它已内置 Popper)
- ❌ 脚本加载顺序错误(如 JS 在 DOM 渲染前执行)→ ✅ 确保










