Bootstrap CSS背景颜色不起作用

Question

我正在使用Bootstrap的V3.3.6,我希望我的Ņavbar的背景颜色是深红色.除了标准的Bootstrap CSS,我有自己的CSS,如下所示:

    .navbar-inverse {
      background-color: #9E1B34;
    }

    .navbar-inverse .navbar-nav > li > a,
    .navbar-inverse .navbar-brand {
      color: white;
    }
    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .active > a:focus,
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus,
    .navbar-inverse .navbar-brand:hover,
    .navbar-inverse .navbar-brand:focus  {
      color: #9E1B34;
      background-color: white;
    }

该网站是http://www.alkd.org.au

当鼠标悬停在每个导航栏项目上时,我会得到正确的红色文本和白色背景样式.但是标准导航栏的背景颜色是黑色,而不是暗红色,即使我已经覆盖.navbar-inverse背景颜色.浏览器开发人员工具显示我的css是"获胜"的,但似乎被忽略了.我在开发人员工具中找不到任何能告诉我黑色来自哪里的东西.我有一个javascript,它将活动类添加到活动页面,将文本颜色设置为红色(这是有效的),但背景颜色应为白色.再一次,开发人员工具显示活动页面背景颜色为白色,但显示为黑色.那黑色从哪里来？什么是摆脱它的最佳方法？

Answer 1

黑色实际上来自.navbar-inverse课堂上的渐变.添加backgound-imagenone将覆盖此.

.navbar-inverse {
    background-color: #9E1B34;
    background-image: none;
}

这也允许您删除!important使代码更易于维护的内容.