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

Question

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

4

我按照这篇文章的方法自定义了导航栏。与此同时，我发现这个链接使用了一个简单的导航栏类。所以我从那里借鉴了这个类。

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

以下是上述链接中声明的nav：

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

我将custom.css加载在bootstrap.css之后，并为navbar-www添加了上面的CSS，但是我的导航栏仍然是黑色的（navbar-inverse）。但是在开发者工具中，我可以看到其被覆盖为navbar-www的自定义背景颜色。我无法弄清楚为什么会发生这种情况以及如何解决它？编辑：修复了类.navbar .navbar-www的拼写错误。

- brain storm

尝试使用重要的东西了吗？ - Nambi N Rajan

4个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tenz · Answer 1

这是我所做的，应该能很好地工作在你的CSS文件中：

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

- wuxianghou · Answer 2

按以下方式编写您的自定义CSS样式

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

您的问题将会被解决。

您可以参考Bootstrap官方文档，您会发现默认导航栏背景被描述为background-image，而background-image和background-color的优先级不同，background-image更加强大。

- krozero · Answer 3

尝试为锚标签添加样式

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

- falsarella · Answer 4

选择器 .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