如何更改打开的Bootstrap下拉切换的颜色？

Question

当Dropdown打开时 - 我想更改它的默认颜色.我想用css改变边框颜色和背景.

http://i.imgur.com/w6WIN.png

这是html代码:

<div class="row menu">
 <ul class="nav nav-pills pull-right">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle"
       data-toggle="dropdown">
      My reports
      <span class="caret my-reports-caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><%= link_to "Performance", performance_reports_path %></li>
      <li class="divider"></li>
      <li><%= link_to "Account settings", '#' %></li>
    </ul>
  </li>
</ul>
</div>

我的css,我试过:

.menu .nav-pills .dropdown .open .dropdown-toggle{
    background-color: red;
}

选择器中的问题在哪里？

Answer 1

如果您使用的是最新版本的Bootstrap,请使用此类.

    .dropdown-toggle:active, .open .dropdown-toggle {
        background:#FFF !important; 
        color:#000 !important;
    }

它解决了我的问题,也许它会帮助你.

Answer 2

这是你的问题：

#original.menu .nav-pills .dropdown .open .dropdown-toggle {
    border: 1px solid blue;
}

#suggested.menu .nav-pills .dropdown .dropdown-toggle {
    border: 1px solid red;
}

http://jsfiddle.net/userdude/mjbN7/

.open元素链中不存在。

这是你对边框的摆弄（它既有.open，也没有border-style或border-width样式）：

http://jsfiddle.net/userdude/bdCMU/4/