html - 无法更改导航栏 Bootstrap 的背景

Question

我已经非常努力地为每个元素编辑我的样式，但没有任何东西会改变我的导航栏的背景。我已经尝试编辑导航栏中可能存在的每个元素，但实际上什么都不会改变。我尝试使用规则“#navbar .navbar-nav”对其进行编辑，但每当我单击背景颜色时，它都会变回透明...我做错了什么？？？？

HTML:

<header role="banner">
<nav id="navbar" class="navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
  <ul class="nav navbar-nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li>
    <li></li>
    <li><a href="#">Link</a><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" -->
</body>

还有我的风格:

#navbar .navbar-nav { 
//  background: #FFFFFF;
width: 100%;
text-align: center;

> .nav.navbar-nav li {
display: inline-block;
float: none;
> .nav.navbar-nav a {
  padding-left: 30px;
  padding-right: 30px;

}
;   
background-color: #000000;
}
}

}
#navbar-primary-collapse .nav.navbar-nav li {
color: #FFFF;
padding-left: 30px;
padding-right: 30px;
background-color: #FFFFFF;
}
.container-fluid .navbar-header .navbar-toggle {
background-color: #FFFFFF;

}
li a #logo-navbar-middle {

}
.nav.navbar-nav li a {
padding-left: 30px;
padding-right: 30px;
text-align: center;
color: #000000;
text-transform: uppercase;
float: none;
display: inline-block;
padding-left: 30px;
padding-right: 30px;
text-align: center;
color: #000000;
text-transform: uppercase;
float: none;
display: inline-block;}
.nav.navbar-nav li  {
float: none;
display: inline-block;
}

Answer 1

CSS

.navbar-default {
    background-color: #fff;
}

并确保在 Bootstrap css 之后加载您的 css 文件