无法更改导航栏引导上的背景

我已经尽力编辑我的样式每一个元素，但没有什么会改变我的导航栏的背景。我尝试过编辑每一个可能在导航栏中的元素，但从字面上看没有任何改变。我已经尝试通过使用规则“#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; 
}

来源

2017-05-26 Jacob Neyenhuis

欢迎来到SO :) #navbar元素的颜色正在改变。小提琴将有助于在这个问题上进行调整:) – semuzaboi

您的CSS不是CSS，而是SASS或等效的，或者它只是无效的CSS。更好的格式可以帮助我们理解你在做什么。 – Rob

CSS

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

，并确保您的CSS文件引导CSS加载后

来源

2017-05-26 12:14:03

它看起来像你还没有正确地在你的CSS声明导航。请尝试以下操作：

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

你会分开#navbar，即使他们都连接到同一元素.navbar-default。

另外，添加另一个阶级和风格是这样：

<nav id="navbar" class="navbar-default navbar-custom" role="navigation">

然后如下目标是：

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

由于bootstrap.css只是样式类作为.navbar-default {}并假设你的CSS在BootStrap之后加载，以上将覆盖BS's，因为它是更具体的，并在之后加载。

如果你愿意，你甚至可以完全删除类navbar-default，并从头开始添加自己的边框/背景，而不是覆盖。

来源

2017-05-26 12:58:30

谢谢!!!!!!!!!! –

@JacobNeyenhuis没问题 - 如果它对你有帮助，请接受正确的答案 - 它可能会在未来帮助其他人。 –

无法更改导航栏引导上的背景

回答

相关问题