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
Highlight list item in Bootstrap
提问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 a
tags the active
ones 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-group
element:
您必须创建自己的类(例如.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>
。