无法在bootstrap 3中更改导航栏的颜色？

Question

我按照此post进行自定义导航栏。同时我遇到了link，它使用了一个简单的导航栏类。所以我从那里借了这个

.navbar.navbar-www {
    background-color: #3E8956;
    border-color: #3E8956;
}

和nav在上面的链接中声明如下：

<nav class="navbar navbar-fixed-top navbar-inverse navbar-www" role="navigation">

我在bootstrap.css之后加载了custom.css，我的custom.css上面有了navbar-www的css。 即使在那之后，我的导航栏仍然是黑色（navbar-inverse）。 但在开发人员工具中，我可以看到它被覆盖到navbar-www的custom.css背景颜色。

我无法弄清楚为什么会发生这种情况以及如何解决这个问题？

编辑： 修正了班级.navbar .navbar-www

的拼写错误

Answer 1

可以改进选择器.navbar.navbar-www的强度。可能其他浏览器可能会理解你的浏览器比另一个更重要。尝试在选择器上更具体，它不会被覆盖！

例如：

• .navbar.navbar-www.navbar-fixed-top
• .navbar.navbar-www.navbar-inverse
• .navbar.navbar-www.navbar-inverse.navbar-fixed-top
• .someClass .navbar.navbar-www
• nav.navbar.navbar-www

Answer 2

尝试将样式添加到锚标记

.navbar.navbar-www a{
  background-color: #3E8956;
  border-color: #3E8956;
}

Answer 3

按如下方式编写自定义CSS填充

.navbar.navbar-www {
    background-image: linear-gradient(rgb(240, 16, 16) 0px, rgb(249, 18, 18) 100%);
    border-color: #3E8956;
}

你的问题将得到解决。

你可以参考bootstrap官方文档，你可以发现默认导航栏背景描述为background-image，背景图像和背景颜色的优先级，不同的背景图像比背景颜色更强大。< / p>

Answer 4

这是我做的，它应该工作正常 在您的CSS文件中：

 .navbar.navbar-xxx{
   background-color: #000000;
   border-color: #c0392b;
 }