Question

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

通常，我使用带有一些自定义类的div来包装这些类，并将其覆盖为

.my-class .typeahead{...}

但是，bootstrap会动态创建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;
...
}

因此，要在不更改下拉菜单的情况下覆盖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规则更具体

覆盖bootstrap typeahead css类

1 个答案: