Bootstrap 5导航栏nav-link失效求助：普通导航项仅显示文本

问题现象 #

添加Bootstrap导航栏后，仅下拉菜单内的dropdown-item链接可正常跳转，普通nav-item下的nav-link仅显示为文本，无法触发点击跳转。

排查方向与解决方案 #

1. 验证Bootstrap依赖完整性 #

• 确认页面已正确引入Bootstrap CSS、Bootstrap JS，以及Bootstrap 5+必需的Popper.js，加载顺序必须为：先CSS，再Popper，最后Bootstrap JS。
• 避免同时引入不同版本的Bootstrap文件，版本冲突会直接导致样式或交互功能异常。

2. 排查自定义CSS的影响 #

你的自定义CSS代码：

.navbar { top: 0 !important; left: 0 !important; width: 100% !important; z-index: 99 !important; }
.container-fluid { max-width: 1440px !important; }

• 先临时注释掉这些自定义样式，测试普通链接是否恢复正常。如果恢复，说明自定义样式干扰了Bootstrap默认行为：
  • z-index:99数值过低，Bootstrap默认导航栏z-index为1000，尝试提高到z-index:1000，避免导航栏被其他元素遮挡点击区域。
  • 检查全局CSS是否存在a { pointer-events: none; }这类规则，意外禁用了链接的点击事件。

3. 修正HTML结构问题 #

你的HTML整体符合规范，但存在ID重复问题：

• 两个下拉菜单的触发按钮使用了相同的id="navbarDropdown"，ID必须唯一，修改为不同ID并对应更新aria-labelledby属性：

  <!-- 第一个下拉菜单 -->
  <li class="nav-item dropdown">
    <a id="navbarDropdownNextSteps" class="nav-link dropdown-toggle" role="button" href="#" data-bs-toggle="dropdown" aria-expanded="false">Next Steps</a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdownNextSteps">
      <li><a class="dropdown-item" href="#next_steps">Personalized</a></li>
      <li><a class="dropdown-item" href="#general_next_steps">General</a></li>
    </ul>
  </li>
  <!-- 第二个下拉菜单 -->
  <li class="nav-item dropdown">
    <a id="navbarDropdownResources" class="nav-link dropdown-toggle" role="button" href="#" data-bs-toggle="dropdown" aria-expanded="false">Resources </a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdownResources">
      <li><a class="dropdown-item" href="#resources">Tutorials</a></li>
      <li><a class="dropdown-item" href="#contact">Contact Us</a></li>
    </ul>
  </li>
  

• 检查nav-link标签是否被其他元素嵌套，导致点击事件被拦截。

4. 排查脚本冲突 #

• 若页面引入了jQuery或其他JS库，可能与Bootstrap JS冲突，临时移除其他脚本测试导航链接是否正常。
• 打开浏览器开发者工具（F12）的Console面板，查看是否有JS报错，报错信息会直接指向问题根源（如Bootstrap模块未找到、Popper未加载等）。

内容的提问来源于stack exchange，提问作者viktorvaughn