twitter-bootstrap - 覆盖bootstrap typeahead css类

Question

我需要覆盖.typeaheadcss 类的 bootstrap typeahead 功能，但是我需要保留默认值。

通常，我用一个带有一些自定义类的 div 包装这些类，并像这样覆盖它

.my-class .typeahead{...}

但是，引导程序会ul动态创建一个，因此我无法应用此类包装器。

有什么解决办法呢？

Answer 1

Bootstrap Typeahead 下拉菜单动态生成以下 HTML：

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

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

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

因此，要在不更改下拉菜单的情况下覆盖预输入，您需要在此规则之后的某处添加一条规则。加载 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 规则更具体，否则此规则应位于上述规则之后