Question

我正在使用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>

Answer 1

使用.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演示开放下拉菜单的背景颜色设置（点击后）。

Bootstrap下拉单击颜色

1 个答案: