Как стилизовать Bootstrap 3 класс acive

Question

Я искал это в течение примерно 3 дней и пробовал почти каждый пример, который я видел, но все же не мог набрать активный класс.

Вот мой HTML

<div class="navbar navbar-inverse navbar-fixed-top" id="mainHeader" role="navigation"> 
    <div class="container"> 


     <button class="navbar-toggle" data-target=".navbar-responsive-collapse" 
       data-toggle="collapse" type="button"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <div class="nav-collapse collapse navbar-responsive-collapse nav-hover-orange"> 
      <ul class="nav navbar-nav pull-right"> 

       <li class="active"><a href="index.html">Home</a></li> 
       <li><a href="houseoldRemovals.html">Houseold Removals</a></li> 
       <li><a href="officeRemovals.html">Office Removals</a></li> 
       <li><a href="storage.html">Storage</a></li> 
       <li><a href="tipsAndAdvice.html">Tips & Advice</a></li> 
       <li><a href="termsAndConditions.html">Terms and conditions</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
<!-- NAV END --> 

Answer 1

Вы должны быть в состоянии сделать это ..

.navbar .nav > li > a:focus, 
.navbar .nav > li > a:hover, 
.navbar .nav > li.active > a { 
    background-color: #11bb11; 
} 

Demo: http://bootply.com/R0zDR7NMCM

Answer 2

Просто добавьте в ваш CSS:

.navbar-inverse .navbar-nav .active a { 
    background-color: #FFF; 
    color: #333; 
    --etc-- } 

Answer 3

Ваше кодирование не самозагрузки стандарт.

Переименуйте nav-collapse в navbar-collapse.

скопируйте css внизу и измените цвет фона на оранжевый.

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus{ 
    background:orange; 
}