Bootstrap导航栏折叠失效的根本原因是JavaScript未正确绑定，主因是bootstrap.bundle.min.js未加载或DOM未就绪；必须将JS置于</body>前、确保data-bs-target与id完全一致、避免重复引入。
data-bs-toggle="collapse" 点击无反应，根本不是 CSS 问题
Bootstrap 导航栏折叠失效，在 Vue 项目里几乎从来不是样式没加载，而是 JavaScript 行为压根没绑定上。核心原因就两个：bootstrap.bundle.min.js 没正确加载，或它执行时 DOM 还不存在。
常见错误现象：点击汉堡图标没反应，控制台无报错，data-bs-toggle="collapse" 属性明明写了但就是不展开菜单。
-
bootstrap.bundle.min.js必须放在</body>前，不能塞在<head>里（除非加defer）；Vue 的挂载点（如app容器）必须已存在于 HTML 中，否则 Bootstrap 初始化找不到目标元素 - 确认没重复引入：删掉所有
popper.min.js和bootstrap.min.js，只留一个bootstrap.bundle.min.js—— 多引一个就会导致Popper is already loaded报错或静默失效 - 检查
data-bs-target和对应id是否完全一致：大小写、连字符、前后空格都算错。比如data-bs-target="#nav-collapse"对应的必须是<div id="nav-collapse">，少个-或多一个空格都不行
Vue 3 中按钮点击后主题闪退，其实是表单提交在捣鬼
导航栏里放个“Dark Mode”按钮，点一下变黑又立刻回浅色——这不是 Vue 响应式失效，是浏览器偷偷把 <form> 提交了，整个页面刷新重置了 theme 状态。
根本原因是：<button> 在 <form> 内默认 type="submit"，哪怕 form 没设 action，也会触发 reload。
立即学习“前端免费学习笔记（深入）”；
- 最轻量修复：给按钮加
@click.prevent，比如<button @click.prevent="changeTheme"> - 更语义化方案：显式写
type="button"，彻底剥离提交语义，比修饰符更直观可靠 - 别用
v-on:click.native.prevent—— Vue 3 已废弃.native，直接@click.prevent就行
移动端点击导航链接后菜单不收起，得手动干预 collapse 实例
在 Vue SPA 里，点击 <a href="/about"> 跳转后，navbar 还撑开着，新页面一加载就“卡”在展开态。这是因为 Bootstrap 的 collapse 状态不会随路由变化自动重置。
不能依赖 data-bs-toggle 自动收起——它只管点击事件，不管跳转后的清理。
- 监听路由变化（如 Vue Router 的
beforeEach），主动调用bootstrap.Collapse.getInstance(el)?.hide() - 或者更简单：给每个导航链接加
@click，在跳转前手动收起，比如@click="collapseRef?.hide(); $router.push('/about')" - 注意：不要同时给
<a>加href和data-bs-toggle="collapse"—— Safari 移动端容易因事件冒泡导致跳转失败或白屏
下拉菜单（Dropdown）点不开，大概率是 JS 引入冲突
Navbar 里的 <li class="dropdown"> 死活不展开，控制台可能报 Cannot read property 'getInstance' of null 或干脆没反应。90% 是 JS 文件打架。
Bootstrap 5.3+ 的 Dropdown 严重依赖 Popper 定位，而 bootstrap.bundle.min.js 已内置兼容版本，额外引入只会坏事。
- 打开浏览器开发者工具 → Network 标签页，确认只加载了一个
bootstrap.bundle.min.js，且状态是 200 - 检查 Sources 或 Console，搜
Popper相关报错；若有Popper is already loaded，立刻删掉所有独立的popper.min.js引用 - 确保
<nav>在<body>内，不在<head>或<body>外——HTML 结构错位会导致 JS 初始化找不到父容器
