Bootstrap 4 Navbar Farbe wird nicht geändert

Question

Ich bin auf der Suche nach der Farbe meiner Navbar Text ändern, aber ich kann es einfach nicht herausfinden. Ich habe es geschafft, indem Sie

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

die Marke Farbe zu ändern, wenn ich versuche

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

nichts mit ändert.

Hier ist mein Navbar-Code, den ich verwende.

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

ODER

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

bereits.

Answer 2

Sie müssen a zu Ihrem CSS hinzufügen.

.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>

können Sie überprüfen auch Fiddle

Answer 3

Sie haben Sie nach dem Bootstrap CSS CSS zu laden und Ihre eigene Klasse oder id mit Klasse Kombination Bootstrap verwenden

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

zu

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

wenn dies nicht Gebrauch! Wichtig in Ihrem CSS arbeiten, aber ich nicht empfehlen, dass oft zu verwenden, weil sein schwer zu CSS über angebracht außer Kraft setzen! Important zum Beispiel

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

oder

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