Bootstrap导航栏样式覆盖失败：无法自定义文字颜色求助

一、自定义active/inactive类不生效的解决方法 #

• 确保样式加载顺序正确：你的custom.css必须在Bootstrap的CSS文件之后引入，否则Bootstrap默认样式会直接覆盖自定义规则。
• 提升选择器特异性：Bootstrap导航栏样式使用了更具体的选择器（如.navbar-nav .nav-link.active），单独的.active类优先级不足。改用精准选择器，无需依赖!important：

  /* 非激活状态导航链接 */
  .navbar-nav .nav-link.inactive {
    color: #6c757d;
  }
  /* 激活状态导航链接 */
  .navbar-nav .nav-link.active {
    color: #dc3545;
  }
  

• 检查类名匹配：确认HTML中导航链接的类名正确，比如<a class="nav-link active" href="#">首页</a>，无拼写错误或嵌套层级问题导致选择器无法命中元素。

二、修改Bootstrap内置CSS变量的方法 #

Bootstrap 5通过CSS自定义变量控制全局样式，可直接覆盖变量修改导航栏默认样式：

1. 全局覆盖（影响所有导航栏）：在custom.css中通过:root重新定义变量：

   :root {
     --bs-navbar-active-color: #dc3545; /* 激活状态文字颜色 */
     --bs-navbar-color: #495057; /* 默认非激活状态文字颜色 */
     --bs-navbar-hover-color: #ffc107; /* 鼠标悬停状态文字颜色 */
   }
   

2. 局部覆盖（仅影响指定导航栏）：给目标导航栏添加自定义类，在该类下覆盖变量：

   .custom-navbar {
     --bs-navbar-active-color: #28a745;
     --bs-navbar-color: #6c757d;
   }
   

   对应HTML结构：

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

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