Bootstrap 的“下拉打开”背景色答案

【问题标题】：Bootstrap's "dropdown open" background colorBootstrap 的“下拉打开”背景色
【发布时间】：2015-05-19 02:28:18
【问题描述】：

当class 从"dropdown" 更改为"dropdown open" 时，我正在尝试更改li 元素的背景颜色。我已经成功地改变了文本的颜色（这是一个a）。但是我无法更改父 li 属性。

我在此处复制了代码：http://www.bootply.com/FK88owgjgL。在 CSS 文件的末尾，您将看到我设法编写的关于 li 及其子元素的背景颜色的代码。我不明白为什么字体颜色有效而背景无效。

任何帮助将不胜感激。

感谢您的宝贵时间

【问题讨论】：

【解决方案1】：

我认为问题与表单内的浮动元素有关，添加 clear fix 会有所帮助。

.navbar-right .dropdown-menu form:after {
    content: "";
    display: table;
    clear: both;
}

由于父级边距，底部有一点额外的背景，可以休息。

.navbar-right {
    margin-bottom: 0;
}

如果您需要在激活时更改搜索项本身的背景（使用放大镜），请使用下面的此项。

li.dropdown.open > a:focus {
  color: #000;
  background: red;
}

演示： http://jsfiddle.net/1ub60vcj/3/

【讨论】：

【解决方案2】：

这是你想要的吗：http://www.bootply.com/rzkcuqK3jA

.nav.navbar-right.navbar-nav.bot-search  {
    background-color: #000;
    margin: 0 -15px;
    padding: 5px 0px;
}

【讨论】：

这将永久更改它。我想更改当您单击它时显示的颜色，也就是显示搜索表单时显示的颜色（在 html 中，您可以将其视为将“open”类添加到 li 元素的 JS。但是，我不想要更改表单背景，只是你刚刚编写的代码中的放大镜变成了黑色..