CSS 在 Bootstrap 中突出显示列表项

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20256516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:08:30  来源:igfitidea点击:

Highlight list item in Bootstrap

csstwitter-bootstraptwitter-bootstrap-3

提问by Craig

Using the Bootstrap module for Drupal I've found the most recent version changes a style that was

使用 Drupal 的 Bootstrap 模块我发现最新版本改变了一种风格

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

to

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

Since my list items are not within atags the activeones have lost their highlight. The style itself is very simple and I could reproduce it myself, but I'd much rather use the official Bootstrap way to highlight a li. What is it?

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

采纳答案by APAD1

There is no "official" bootstrap styling for an li element which is not within an anchor tag. You will have to add the styling externally.

对于不在锚标记内的 li 元素,没有“官方”引导程序样式。您必须在外部添加样式。

回答by kjdion84

You must create your own class (e.g. .list-group-hover) and apply it to the .list-groupelement:

您必须创建自己的类(例如.list-group-hover)并将其应用于.list-group元素:

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

回答by Cindy K.

As the OP mentioned, the style for <li>elements worked in Bootstrap 3.0.0, but in the more recent 3.1.1 version, it was removed from the main bootstrap.css file. However, I did find it in the bootstrap-theme.css file, so maybe they decided it should be part of a theme and not part of the core of Bootstrap?

正如 OP 所提到的,<li>元素的样式在 Bootstrap 3.0.0 中有效,但在最近的 3.1.1 版本中,它从主 bootstrap.css 文件中删除。但是,我确实在 bootstrap-theme.css 文件中找到了它,所以也许他们认为它应该是主题的一部分而不是 Bootstrap 核心的一部分?

I also found that it is missing from a theme I downloaded from bootswatch.com, so they are probably following the bootstrap core's example and only allowing the activetag on <a>elements.

我还发现我从 bootswatch.com 下载的主题中缺少它,因此他们可能遵循引导程序核心的示例并且只允许元素上的活动标签<a>