ändern CSS für li mit Klasse aktiv Bootstrap

Question

ich Bootstrap auf meiner Seite verwenden:

<?php echo '<div class="navbar navbar-default" role="navigation"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="index.php">Project name</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active" id="one"><a href="index.php">Home</a></li>';? > 
<?php 
if (isset($_COOKIE['id']) and isset($_COOKIE['hash'])) { 
echo '<li><a href="logout.php">Logout</a></li>'; 
} 
?> 
<?php echo '</ul> 
    </div> 
</div> 
</div>'; 

Ich möchte li mit Klasse Hintergrund ändern aktiv:

li .active{ 
    background-color: red; 
} 

Aber mein Code funktioniert nicht

Answer 1

Versuchen

.navbar-default .navbar-nav > .active{ 
    color: #000; background: red; 
} 
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
    color: #000; 
    background: red; 
} 

Answer 2

Entfernen Raum zwischen li . active geändert li.active Elemente

css

li.active{ 
    background-color: red; 
} 

Demo

Answer 3

Bitte versuchen Sie es:

li.active{ 
    background-color: red !important; 
} 

Answer 4

Sie können u se diesen Code.

li.active{ 
 
    background-color: red; 
 
}