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

Question

我使用了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”中更改背景颜色时，它就像一个魅力。我不知道该怎么办了。

谢谢！

Answer 1

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

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

例如：

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