无法在引导程序 3 中更改导航栏的颜色？答案

【问题标题】：unable to change color of navbar in bootstrap 3?无法在引导程序 3 中更改导航栏的颜色？
【发布时间】：2014-05-23 09:11:00
【问题描述】：

我按照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）。但在开发人员工具中，我可以看到它被覆盖到我的 custom.css 背景颜色中，用于导航栏-www。

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

编辑：修复了类 .navbar .navbar-www 的错字

【问题讨论】：

尝试使用重要 ??

标签： css twitter-bootstrap navbar

【解决方案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

【讨论】：

抱歉，这里粘贴的时候打错了，但是颜色并没有从 navbar-inverse 改变
还有 .navbar-www 也没有帮助。我在 chrome 中看到设置了这个背景，但在屏幕上看不到
在这种情况下，我已经编辑了我的答案。看看并尝试：D
我试过了。但没有帮助。但是，删除 navbar-inverse 会更改背景颜色，但字体颜色也会更改为默认蓝色（之前为白色）
太诡异了……你试过清除浏览器缓存吗？

【解决方案2】：

尝试为锚标签添加样式

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

【讨论】：

这只会使链接改变颜色，但背景仍然是黑色

【解决方案3】：

如下编写自定义 CSS 填充

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

您的问题将得到解决。

你可以参考bootstrap官方文档，可以发现默认的navbar背景描述为background-image，background-image和background-color的优先级，区分background-image比background-color强大。

【讨论】：

【解决方案4】：

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

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

【讨论】：