Bootstrap5 nav-link无蓝色样式及hover效果异常问题求助

你的问题根源在于HTML语法错误：<nav>标签的class属性引号未闭合（原代码写成了class="navbar navbar-expand-lg，缺少结尾的双引号）。这种错误会导致浏览器解析CSS类时出现异常，使得Bootstrap预设的nav-link蓝色文本样式、hover交互效果无法正常加载。

错误代码片段： #

<nav class="navbar navbar-expand-lg>
  <!-- 导航内容 -->
</nav>

修正后的完整示例代码： #

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">导航标题</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="切换导航">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">功能</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

补充说明： #

W3schools、codeply这类在线代码编辑器会自动修复部分基础HTML语法问题，所以你的代码在这些平台能正常运行，但本地环境下浏览器会严格按代码解析，未闭合的引号会破坏DOM结构，导致样式匹配失败。修正引号后，nav-link的默认蓝色样式和hover效果就能正常生效了。

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