在Bootstrap中突出显示列表项

Question

使用Drupal的Bootstrap模块，我发现最新版本更改了一个样式

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus

a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus

由于我的列表项不在 a 标签内，因此 active 的部分失去了高亮显示。样式本身非常简单，我可以自己复制它，但我更想使用官方的 Bootstrap 方法来突出显示 li。是什么方法？

- Craig

---

使用Chrome的开发者工具并检查元素。 - Matthew Johnson

我使用Firebug发现了我在问题中提到的内容。样式已更改为需要a标签。 - Craig

Answer 1

你需要创建自己的类（例如.list-group-hover）并将其应用到.list-group元素上：

.list-group-hover .list-group-item:hover {
    background-color: #f5f5f5;
}

- kjdion84

Answer 2

对于不在锚点标签内的li元素，没有官方的Bootstrap样式可供使用。您需要从外部添加样式。

- APAD1

---

很遗憾，我认为突出显示某个项目是一个常见的用例，因此它应该是框架的一部分。我将只是复制链接版本的样式。 - Craig

Answer 3

正如OP所提到的，<li>元素的样式在Bootstrap 3.0.0中有效，但在更新的3.1.1版本中，它已从主要的bootstrap.css文件中删除。然而，我在bootstrap-theme.css文件中找到了它，所以也许他们决定把它作为一个主题的一部分，而不是Bootstrap的核心部分？

我还发现，在我从bootswatch.com下载的主题中也缺少它，所以他们可能遵循Bootstrap核心的例子，只允许在<a>元素上使用active标签。

- Cindy K.