我正在进行我的第一个引导程序项目,我在修改导航栏时遇到了一些困难,我花了几个小时进行研究,但我特别关注一个项目。单击时,下图中圈出的列表项将标准引导程序变为灰色,我希望它与背景颜色匹配,黑色。
虽然我问我也想改变下拉菜单的颜色。
这是我的标记:
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle btn-lg">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img alt="brand" class="image-responsive" src="traclogo.png" height="140px" width="260px"></img>
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Products<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Suspension Kits</a></li>
<li><a href="#">Light Bar Mounts</a></li>
<li><a href="#">Custom Fabrication</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Builds<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Tacoma</a></li>
<li><a href="#">Bronco</a></li>
<li><a href="#">Hot Rods</a></li>
<li><a href="#">Everything Else</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
答案 0 :(得分:0)
您可能希望更改焦点上的标签颜色。下拉样式由.dropdown-menu
类及其后代类控制。
.navbar-default .navbar-nav > .open > a:focus {
background: #000 !important; /* Avoid !important, added for the sake of SO snippet priority */
color: #fff !important;
}
.dropdown-menu {
background: lightblue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle btn-lg">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img alt="brand" class="image-responsive" src="traclogo.png" height="140px" width="260px">
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Products<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Suspension Kits</a>
</li>
<li><a href="#">Light Bar Mounts</a>
</li>
<li><a href="#">Custom Fabrication</a>
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Builds<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Tacoma</a>
</li>
<li><a href="#">Bronco</a>
</li>
<li><a href="#">Hot Rods</a>
</li>
<li><a href="#">Everything Else</a>
</li>
</ul>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>