如何用CSS覆盖Bootstrap默认样式实现导航栏白字+primary-subtle背景

你设置了导航栏背景为bg-primary-subtle并添加了data-bs-theme="dark"，但导航链接文字仍未显示白色。这是因为bg-primary-subtle属于浅色背景类，和深色主题的样式规则优先级不匹配，导致白色文本样式没被正确应用。另外你代码里的active:text-decoration:none是Tailwind CSS的语法，Bootstrap不支持这种写法，得改成标准写法。

下面提供两种可行的解决方法：

方法一：用Bootstrap内置文本类直接设置 #

直接给导航链接和品牌文字添加text-white类，同时修正active状态的样式：

<nav class="navbar navbar-expand-lg bg-primary-subtle" data-bs-theme="dark">
  <a class="navbar-brand text-white" href=""> CONNECT </a>
  <ul class="nav ms-auto">
      <li class="nav-item"><a class="nav-link text-white active" href="">Home</a></li>
      <li class="nav-item"><a class="nav-link text-white" href="">Signup</a></li>
      <li class="nav-item"><a class="nav-link text-white" href="">Reviews</a></li>
      <li class="nav-item"><a class="nav-link text-white" href="">Login</a></li>
  </ul>
</nav>

再在自定义CSS里处理active状态的下划线：

.nav-link.active {
  text-decoration: none;
}

方法二：自定义CSS提高优先级覆盖样式 #

如果不想逐个添加text-white，可以写一个高优先级的CSS选择器，直接针对该导航栏的链接设置白色文本，同时覆盖hover、active等状态：

.navbar.bg-primary-subtle .nav-link {
  color: white;
}
.navbar.bg-primary-subtle .nav-link:hover,
.navbar.bg-primary-subtle .nav-link.active {
  color: #f0f0f0; /* 可选：hover或active时微调颜色 */
  text-decoration: none;
}

对应的HTML保留原有结构（去掉错误的active:text-decoration:none）：

<nav class="navbar navbar-expand-lg bg-primary-subtle" data-bs-theme="dark">
  <a class="navbar-brand" href=""> CONNECT </a>
  <ul class="nav ms-auto">
      <li class="nav-item"><a class="nav-link active" href="">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="">Signup</a></li>
      <li class="nav-item"><a class="nav-link" href="">Reviews</a></li>
      <li class="nav-item"><a class="nav-link" href="">Login</a></li>
  </ul>
</nav>

注：如果默认选择器优先级不够，可把选择器改成.navbar.navbar-expand-lg.bg-primary-subtle .nav-link，进一步提高权重，无需依赖!important。

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