Bootstrap 4导航栏颜色不会改变

Question

我正在寻找改变我的导航栏文本的颜色，但我根本无法弄清楚。我设法用

.navbar .navbar-brand { 
color: red;} 

改变品牌颜色当我尝试使用

.navbar .navbar-nav { 
color: red;} 

没有什么变化。

这是我使用的导航栏代码。

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
     <ul class="navbar-nav"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Features</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Pricing</a> 
     </li> 
     <li class="nav-item dropdown"> 
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Dropdown link 
      </a> 
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
       <a class="dropdown-item" href="#">Action</a> 
       <a class="dropdown-item" href="#">Another action</a> 
       <a class="dropdown-item" href="#">Something else here</a> 
      </div> 
     </li> 
     </ul> 
    </div> 
</nav> 

Answer 1

.navbar .navbar-nav > li { 
    color: red; 
} 

OR

.navbar .navbar-nav > li > a { 
    color: red; 
} 

试试这个。

Answer 2

您需要将a添加到您的css中。

.navbar .navbar-nav a { 
 
    color: red; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <a class="navbar-brand" href="#">Navbar</a> 
 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
 
     <ul class="navbar-nav"> 
 
     <li class="nav-item active"> 
 
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Features</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Pricing</a> 
 
     </li> 
 
     <li class="nav-item dropdown"> 
 
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
      Dropdown link 
 
      </a> 
 
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
 
       <a class="dropdown-item" href="#">Action</a> 
 
       <a class="dropdown-item" href="#">Another action</a> 
 
       <a class="dropdown-item" href="#">Something else here</a> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
</nav>

您还可以检查Fiddle

Answer 3

您必须加载您引导CSS后CSS和使用自己的class和id与组合引导的类

.navbar .navbar-nav { 
    color: red; 
} 

到

​​

如果这是不行的使用！重要的在你的CSS，但我不建议你经常使用，因为它很难覆盖CSS通过连接！重要 例如

.navbar .navbar-nav.myclass { 
    color: red !important; 
} 

或

.navbar .navbar-nav{ 
     color: red !important; 
    }