多数情况不是代码写错，而是bootstrap交互逻辑与html结构隐性冲突：data-bs-toggle与href同置标签会触发事件冒泡或preventdefault()，导致跳转失败、白屏或刷新；spa中需手动调用router.push()并hide()折叠项，移动端须主动collapse.hide()避免状态丢失。
直接说结论：多数情况不是代码写错了，而是 Bootstrap 的交互逻辑和你的 HTML 结构产生了隐性冲突——尤其是 data-bs-toggle 和 href 同时出现在同一个 <a></a> 标签上，或者目标页面没加载完就触发了跳转。
为什么加了 href 还是不跳转？
常见现象是点击导航链接后页面卡住、白屏、刷新但没到目标地址，或控制台静默无报错。根本原因在于：data-bs-toggle="collapse" 或 data-bs-toggle="dropdown" 本身不接管跳转逻辑，但它绑定的 JS 事件可能意外调用 preventDefault()，尤其在以下场景：
- 把
data-bs-toggle="collapse"和href="/about"写在同一个<a class="nav-link"></a>上 —— 这是 Bootstrap 官方明确不推荐的用法 - 用了
href="#"或href="javascript:void(0)"却忘了补真实跳转逻辑 - SPA 场景下（如 Vue Router），
router-link被 Bootstrap 的 click 监听器拦截，且未手动调用router.push()
移动端点击后 collapse 没收起就跳走了
折叠菜单在动画过程中被页面卸载，导致视觉“卡展开”，实际新页面已加载。这不是 Bug，而是浏览器行为：CSS 过渡未完成时 DOM 被销毁，状态丢失。
- 必须在
click事件中主动调用collapse.hide()，而不是依赖自动收起 - 不要等动画结束再跳转（
hide().then(...)在页面跳转时不可靠） - 如果用原生
location.href或<a href></a>，确保collapse.hide()在event.preventDefault()之前调用，否则 Safari 可能忽略
跨页面锚点跳转（如 /home#contact）失效
链接能打开页面，但没滚动到 id="contact" 区域。这通常和 JS 插件干扰或 DOM 就绪时机有关，而非 Bootstrap 本身问题。
- 检查是否引入了
isotope、scrollify或自定义$('a[href^="#"]').on('click', ...)，它们常在DOMContentLoaded前就绑定了preventDefault() - 目标元素（如
<div id="contact">）不能被 <code>display: none、height: 0或visibility: hidden隐藏，否则浏览器无法定位 - 如果目标在
.collapse内部，确保它所在的折叠块在页面加载时已show，否则锚点计算位置为 0 - 把触发器换成
<button class="nav-link dropdown-toggle"></button>，让子菜单项<a href="/product/a"></a>独立存在 - 别在二级
<a></a>上加data-bs-toggle，它只属于一级触发器 - 移动端要注意
.dropdown-backdrop层级问题：加一行 CSS.dropdown-backdrop { position: static !important; }可解点击穿透
二级菜单（dropdown）里的链接点不动
一级菜单能展开，二级项 hover 有样式、点击却没反应——大概率是因为你用了 data-bs-toggle="dropdown" 的 <a></a> 标签作为触发器，而 Bootstrap 5 默认会拦截其默认行为。
最易被忽略的一点：多个导航栏共存时，每个 navbar-collapse 的 id 必须唯一，且和对应 data-target 完全一致（包括大小写和符号）。差一个字符，整个折叠链就断了，连带影响所有子菜单跳转逻辑。
