アクティブなナビゲーションバーの背景色を変更するには？

Question

ブートストラップを使用しましたが、アクティブなページの背景を緑色に変更したいのですが、動作しません。

.navbar-inverse { 
 
    color: #fff; 
 
    background-color: #4CAF50; 
 
}

<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <div class="logo"> 
 
     <img src="images/logo.png"> 
 
     </div> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="index.html">Home</a></li> 
 
     <li><a href="about.html">About</a></li> 
 
     <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

私は「点検要素」で背景色を変更すると、それは魔法のように動作します。もう何をしようとするのか分からない。

ありがとうございます！

Answer 1

私のコンピュータでコードをテストしたところ、完全に動作します。

ブートストラップの前にCSS をリンクしているため、それがうまくいかない理由は、私は推測しています。ブートストラップのCSSをオーバーライドするには、ブートストラップの後にカスタムCSS をリンクする必要があります。

例：

<link href="bootstrap.css" ...> 
<!-- put your custom css after bootstrap --> 
<link href="my-custom-style.css" ...>