Question

我一直在寻找解决方案。我正在尝试更改导航栏的背景颜色，但它不会改变颜色。我的CSS链接是在bootstrap CSS cdn（常见建议）之后。当我将所有代码添加到jsfiddle时，它的更改没有问题但是在Chrome浏览器中查看我的页面时它并没有（不会让我发布第三个链接但是相信我的灰色不是红色）。奇怪的是，当我在chrome中检查页面时，默认背景被触发（http://imgur.com/qEZqQAg）并且我的代码处于活动状态（http://imgur.com/zuc0yRq），但它仍然没有变化。

完整的HTML Navbar代码

<nav class="navbar navbar-default navbar-custom">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-
   toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria- 
   expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>
    <img src="newburyvision/meetstaff/eye.jpg" class="navbar-brand"/>
     <a href="#" class="navbar-text navbar-left">
      <h1> Eye Glass Company</h1>
       <h4>eye exams, contacts lenses and fashionable eyewear</h4>
     </a>
</div> <!--End Navbar header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-
1">
 <ul class="nav navbar-nav navbar-right">
  <li><a href="#">Meet Our Team</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Book an Appointment</a></li>
  <li><a href="#">Directions + Hours</a></li>
</ul>
</div> <!--End Navbar Collapse-->
</div>  <!--End Container-->
</nav>

完整的CSS

.navbar-brand {
    height: 80px;
    width: 90px;
    margin-top: 4%;
}


.navbar-text {
    text-align: center;
    margin-top: 0;
}

.navbar-text h1 {
    color: black;
    font-size: 40px;
    font-family: 'Roboto Slab', sans-serif;
    text-decoration: underline;

}

.navbar-text h4 {
    color: black;
    font-size: 12px;
    font-family: 'Source Sans Pro', sans-serif;
}

.navbar-collapse {
    margin-top: 3%;
}

.navbar-default {
  background-color: red;
}

Answer 1

所以我终于弄清楚发生了什么。背景图像阻挡了我的背景颜色。我只是坐在谷歌检查，并关闭了我能找到的每一个css。无论如何，我提出的代码是修复它

<强> CSS

.navbar-default {
  background-color: red !important;
  background-image: none;
}

我真的不认为！important是必要的，因为如上所述，这不是覆盖问题

给我的特定背景图片的屏幕截图问题

点击并阻止我的背景颜色

http://imgur.com/XjuSfBI

单击关闭并显示背景颜色（最后）

http://imgur.com/NMLrWNX

无法更改Navbar bootstrap 3的背景颜色

1 个答案: