我正在使用getbootstrap.com css页面上的navbar,现在正在对其进行编辑以满足我的需要。我已经完成了大多数工作,但无法弄清楚如何在这里更改这种颜色(白色):
http://image.prntscr.com/image/75cbf6b49f3b48eab11f28a6aeca8ae8.png
这是:活动状态吗?
我尝试过的
.navbar .dropdown-toggle:active{
background-color: inherit;
}
与.dropdown相同。这是代码:
<ul class="nav navbar-nav navbar-right m-r-0">
@if(Auth::check())
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="{{Auth::user()->avatar}}" alt="" class="profileimg"> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li></li>
@else
<li><a href="{{route('steamauth')}}"><img src="https://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_01.png" alt=""></a></li>
@endif
</ul>
最佳答案
对于.navbar-default
,Bootstrap的目标是打开导航栏下拉菜单的background-color
:
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
color: #555;
background-color: #e7e7e7;
}
不使用
.navbar
时,尝试为.navbar-default
下拉列表定位以下内容.navbar .navbar-nav>.open>a,
.navbar .navbar-nav>.open>a:focus,
.navbar .navbar-nav>.open>a:hover {
background-color: red;
}
这是jsfiddle演示打开下拉菜单(单击后)的背景颜色设置。
关于html - Bootstrap下拉点击的颜色,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42077266/