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; 
    }