Question

Bootstrap在2.2.1中有一个带有typeahead继承的错误 - 已在2.2.2中修复。

Answer 1

Bootstrap Typeahead下拉列表动态生成以下HTML：

  <ul class="typeahead dropdown-menu">
      ...
      <li><a href="#">MATCHING RESULT</a></li>
      ...
  </ul>

适用的默认CSS规则也是一个样式下拉菜单。

.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
    color: #333333;
    text-decoration: none;
    background-color: #0081c2;
    ...
}

因此，要在不更改下拉菜单的情况下覆盖typeahead，您需要在此之后的某处添加规则。加载bootstrap.css后，我将我的文件放在一个单独的文件中。*

.typeahead .active > a,
.typeahead .active > a:hover {
    color: white;

    /* Change the typeahead background color here if you'd like */
    background-color: Green;

    /* Turns off the default background gradients */
    background-image: none;
}

* 最佳做法建议您在投入生产时合并并最小化所有CSS，但无论如何，此规则应在上述规则之后，除非您使其比.dropdown-menu规则更具体

Answer 2

bootstrap.css文件中的第2838行只是将其更改为：

color: white;

如果您正在使用.less文件，那么我必须在dropdown.less文件中进行一些挖掘。如果发生这种情况，只需快速搜索：“。dropdown-menu li＆gt; a：focus，.dropdown-submenu：hover＆gt; a {”你就可以找到它。

修改bootstrap typeahead的“active”css

2 个答案: