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

时间:2016-05-01 02:48:16

标签: html css twitter-bootstrap

我使用了bootstrap,我想将活动页面背景更改为绿色,但它不起作用。

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

当我在“Inspect Element”中更改背景颜色时,它就像一个魅力。我不知道该怎么办了。

谢谢!

1 个答案:

答案 0 :(得分:0)

我在我的计算机上测试了你的代码,它完美无缺。

为什么它不适合你,我猜,因为你在HTML中将你的CSS 链接到 Bootstrap之前。要覆盖Bootstrap的CSS,您需要在 Bootstrap之后链接自定义CSS

例如:

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