我有一些小组找到了正确的css代码,我可以在导航栏处于活动状态时更改其背景颜色。现在它看起来像这样:
正如您所看到的,我在about部分,但在活动时没有背景颜色。已经在堆栈上搜索了一些帖子,但是他们在这些帖子中提供的代码尚未解决它。
代码
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="row">
<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>
<img alt="searchPage" style="vertical-align: middle;" height="50px" src="images/logo.jpg" title="Start bilferien til Norge eller England" />
</div>
</div>
</div>
<div class="navbarmiddle">
</div>
<div class="container">
<div class="row">
<div class="navbarunder">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
</div>
</div>
我已经尝试了我的bootstrap文件中的所有选项,其中包含navbar-inverse和navbar-fixed-top,但没有一个可用。
还在我的Css文件Site.Css中尝试过这段代码,但也没有用。
.nav .active a { background:#003665 !important }
欢迎任何建议。
阅读完专题后,我在Site.css文件中尝试了这些设置。
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #000;
background: #003665;
}
.navbar-default .navbar-nav > .active > li{
color: #000;
background: #005184;
}
.navbar-fixed-top .active a {
color: #000;
background: #005184;
}
这也行不通.. :(
答案 0 :(得分:0)
这对我有用:
.navbar .nav .active {
background-color: #005184;
}
.navbar .nav .active > a {
color: #000;
background-color: #005184;
}
答案 1 :(得分:0)
转到http://getbootstrap.com/customize/并更改@ navbar-default-link-active-bg的值。我可以调整尽可能多的其他颜色和设置,然后下载包。
如果您不使用自定义版本,则至少会看到值的使用位置。