我正在尝试生成一个自定义的nabar，它看起来像JSFIDDLE THIS LINK上的单独按钮，如下图：
由于我的页面中有两个导航栏，因此我将第一个导航栏包装在名为.firstnav的div包装器中，如下所示：
<div class="firstnav">
<nav class="navbar navbar-default navbar-right" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-lg hidden-sm hidden-md " href="#">Teddy Bear Childcare</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php?page_id=4">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="index.php?page_id=18">About Us</a></li>
</ul>
</li>
<li class="nice"><a href="index.php?page_id=15">Programs</a></li>
<li class=""><a href="index.php?page_id=25">Testimonial</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</div><!--/ End of navbar row-->
对于CSS，我正在尝试通过使用
.firstnav >来定位元素，到目前为止，该方法对我来说不起作用！这是我的CSS代码.firstnav > .navbar-default,
.firstnav > .navbar-right {
background-color:none !important;
border-color:none !important;
}
.firstnav > .navbar-nav > li {
float: left;
background: rgba(250,172,84,1);
background: -moz-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(250,172,84,1)), color-stop(100%, rgba(245,142,35,1)));
background: -webkit-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
background: -o-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
background: -ms-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
background: linear-gradient(to bottom, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faac54', endColorstr='#f58e23', GradientType=0 );
margin-left:8px;
border:#fff 4px solid;
border-radius:25px;
color:white;
width:120px;
}
.firstnav > .navbar-nav > li > a {
padding-top: 12px;
padding-bottom: 12px;
color:white;
font-weight:bold;
}
您能告诉我我做错了吗？
最佳答案
第一条规则不起作用，因为您不能将none用作background-color属性的值。而是使用background速记（因为无论如何您要覆盖的都是渐变）-您也不能将none用作border-color的值-使用transparent将其恢复为初始值
.firstnav > .navbar-default,
.firstnav > .navbar-right {
background: none !important;
border-color: transparent !important;
}
使用
.firstnav > .navbar-nav的最后两个规则不起作用，因为>选择给定元素的子代。 .navbar-nav不是.firstnav的子级，因此不应用这些规则。代替
>只是在.firstnav和.navbar-nav之间使用space：http://jsfiddle.net/52VtD/579/.firstnav .navbar-nav > li {
float: left;
background: rgba(250,172,84,1);
background: -moz-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(250,172,84,1)), color-stop(100%, rgba(245,142,35,1)));
background: -webkit-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
background: -o-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
background: -ms-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
background: linear-gradient(to bottom, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faac54', endColorstr='#f58e23', GradientType=0 );
margin-left:8px;
border:#fff 4px solid;
border-radius:25px;
color:white;
width:120px;
}
.firstnav .navbar-nav > li > a {
padding-top: 12px;
padding-bottom: 12px;
color:white;
font-weight:bold;
}
关于css - 在Bootstrap 3中覆盖导航栏样式的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20037392/