我已经非常努力地为每个元素编辑我的样式,但没有任何东西会改变我的导航栏的背景。我已经尝试编辑导航栏中可能存在的每个元素,但实际上什么都不会改变。我尝试使用规则“#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;
}
最佳答案
CSS
.navbar-default {
background-color: #fff;
}
并确保在 Bootstrap css 之后加载您的 css 文件
关于html - 无法更改导航栏 Bootstrap 的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44201209/