Html 引导导航条下拉元件
我已经生成了一个bootstrap3nav条,它在一个我不能完全理解的用例之外工作得非常好 当我打开下拉菜单时,导航栏元素变为黑色,尽管我还没有定义这种行为 当我检查元素时,我可以看到下面的CSS似乎被遵循(我更改了颜色以证明这是一个有问题的项目),尽管我认为这是用我的CSS风格写得太多了:Html 引导导航条下拉元件,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我已经生成了一个bootstrap3nav条,它在一个我不能完全理解的用例之外工作得非常好 当我打开下拉菜单时,导航栏元素变为黑色,尽管我还没有定义这种行为 当我检查元素时,我可以看到下面的CSS似乎被遵循(我更改了颜色以证明这是一个有问题的项目),尽管我认为这是用我的CSS风格写得太多了: .navbar-nav>.open>a { background-image: -webkit-linear-gradient(top,#080808 0,#0f0f0f 100%); back
.navbar-nav>.open>a {
background-image: -webkit-linear-gradient(top,#080808 0,#0f0f0f 100%);
background-image: -o-linear-gradient(top,#080808 0,#0f0f0f 100%);
background-image: -webkit-gradient(linear,left top,left bottom,from(#080808),to(#0f0f0f));
background-image: linear-gradient(to bottom,#FFFFFF 0,#FFFFFF 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
background-repeat: repeat-x;
-webkit-box-shadow: inset 0 3px 9px rgba(0,0,0,.25);
box-shadow: inset 0 3px 9px rgba(0,0,0,.25);
}
如何删除此样式,使navbar元素的背景色保持我想要的颜色
我的HTML:
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<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" href="#">My brand here</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">Item One</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Item Two <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Drop down item </a></li>
<li><a href="#">Drop down item </a></li>
<li><a href="#">Drop down item </a></li>
<li><a href="#">Drop down item </a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Item three <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Drop down item </a></li>
<li><a href="#">Drop down item </a></li>
<li><a href="#">Drop down item </a></li>
</ul>
</li>
<li>
<a href="#">Item four </a>
</li>
<li>
<a href="#">Item five</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
打开导航栏下拉列表时的行为截图:
覆盖
导航栏的背景图像
属性。更新CSS代码,如下所示
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {background-image:none !important; background-color: #F61E99 !important;}
大多数人没有时间复制和粘贴所有代码来测试它,你能把它放在一把小提琴里吗。thanks@blairmeister现在当然可以了。
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {background-image:none !important; background-color: #F61E99 !important;}