如何修改Bootstrap导航栏（Navbar）中的文字颜色？

你直接给<nav>加color样式没效果，是因为Bootstrap的.navbar-brand类自带文字颜色样式，优先级比继承自父元素的样式高。给你两个简单的解决办法：

方法一：直接给目标元素加内联样式 #

修改<a>标签，把颜色样式直接写在它身上，优先级最高，能直接覆盖默认样式：

<nav class="navbar" style="background-color: #121212;">
    <div class="container-fluid">
      <a class="navbar-brand" href="#" style="color: #b3b3b3;">Navbar</a>
    </div>
</nav>

方法二：自定义CSS样式（推荐多元素场景） #

如果导航栏里还有其他链接，用这种方法更方便维护。在页面的<style>标签或外部CSS文件中添加：

/* 用更具体的选择器覆盖Bootstrap默认样式 */
nav.navbar .navbar-brand {
    color: #b3b3b3;
}
/* 要是有其他导航链接（比如带.nav-link类的），也可以一起设置 */
nav.navbar .nav-link {
    color: #b3b3b3;
}

之后HTML保持原有结构即可，无需加内联样式：

<nav class="navbar" style="background-color: #121212;">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <!-- 示例：其他导航链接 -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
      </ul>
    </div>
</nav>

如果遇到样式仍不生效的情况，可以临时给CSS规则加!important（尽量少用，仅应急）：

nav.navbar .navbar-brand {
    color: #b3b3b3 !important;
}

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