如何更改活动导航栏的背景颜色？

问题描述：

我用引导程序，我想将活动页面背景更改为绿色，但它不起作用。如何更改活动导航栏的背景颜色？

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

当我改变“检查元素”的背景色它就像一个魅力。我不知道该怎么试。

谢谢！

你的意思是你想改变积极的HREF项的背景色？如果是的话，你可以试试这个： .navbar-inverse .navbar-nav .active a { color：#fff; background-color：＃4CAF50; } –

答

我在我的电脑上测试了你的代码，它完美地工作。

为什么它不适用于你我猜，因为你正在链接你的CSS Bootstrap in HTML。为了覆盖Bootstrap的CSS，您需要链接自定义CSS 后 Bootstrap。

如：

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

如何更改活动导航栏的背景颜色？

相关推荐