Twitter bootstrap 折叠菜单中引导导航li元素的选择器
我想在折叠的引导导航栏中选择导航链接。我希望移动版本的导航元素的颜色不同。我尝试使用Twitter bootstrap 折叠菜单中引导导航li元素的选择器,twitter-bootstrap,navigation,selector,Twitter Bootstrap,Navigation,Selector,我想在折叠的引导导航栏中选择导航链接。我希望移动版本的导航元素的颜色不同。我尝试使用navbarCollapse.in执行此操作,但不起作用 window.onload=$('.navbar包装器a').css('color','white'); window.onload=$('#navbarCollapse.in a').css('color','#36454F'); 我的导航栏如下所示: 切换导航 联系我们 您必须使用jquery吗?在您的情况下,我建议只使用css,结
navbarCollapse.in
执行此操作,但不起作用
window.onload=$('.navbar包装器a').css('color','white');
window.onload=$('#navbarCollapse.in a').css('color','#36454F');
我的导航栏如下所示:
切换导航
您必须使用jquery吗?在您的情况下,我建议只使用css,结合媒体查询,仅在移动设备上应用颜色修改
CSS代码
<style type="text/css">
//Color modification will be applied only for mobile devices
@media (max-width: 992px)
{
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li > a
{
color :Red;
}
}
</style>
//颜色修改仅适用于移动设备
@介质(最大宽度:992px)
{
.navbar默认值.navbar nav>.active>a,
.navbar默认值.navbar nav>li>a
{
颜色:红色;
}
}
HTML代码
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
切换导航
干杯