twitter-bootstrap 在引导程序中列出带有背景颜色的链接项的组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35632771/
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
List group with linked item with background color in bootstrap
提问by Leandro
Bootstrap version: Bootstrap v3.0.0
Using the bootstrap example for bootstrap list group with linked items:
Bootstrap 版本：Bootstrap v3.0.0
使用带有链接项的引导列表组的引导示例：
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
I need to change the background color as a Contextual classes
我需要将背景颜色更改为 Contextual classes
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
The trick part is I can't merge both examples, and the following combinations doesn't work:
技巧部分是我无法合并两个示例，并且以下组合不起作用：
<a href="#" class="list-group-item list-group-item-danger">
<a href="#" class="list-group-item bg-danger">
<a href="#" class="list-group-item danger">
So the question....
所以问题....
Is possible to change this with bootstrap class, or maybe overriding some css?
是否可以使用 bootstrap 类来改变它，或者覆盖一些 css？
Thanks and kind regards.
谢谢和亲切的问候。
UPDATE:
Suggested answer is working on fiddle but not in my code.
Bootstrap version: Bootstrap v3.0.0
The group is in a panel content.
更新：
建议的答案正在处理小提琴，但不在我的代码中。
Bootstrap 版本：Bootstrap v3.0.0
该组在一个面板内容中。
Complete code:
完整代码：
<div class="col-md-5">
<div class="panel panel-default">
<div class="panel-body">
<div class="list-group">
<a href="#" class="list-group-item">Cras justo odio</a>
<a href="#" class="list-group-item list-group-item-danger">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-warning">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-success">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-info">Vestibulum at eros</a>
</div>
</div>
</div>
</div>
采纳答案by bafforosso
EDIT: The following only works with Bootstrap v3.1.0+, if you absolutely need to use an older version you need to use custom classes and style them with CSS.
编辑：以下仅适用于 Bootstrap v3.1.0+，如果您绝对需要使用旧版本，则需要使用自定义类并使用 CSS 设置样式。
your first combination works perfectly.
您的第一个组合效果很好。
Please make sure that you follow the exact structure for the component, in your case List-Group with Linked Itemswhich has a structure like :
请确保您遵循组件的确切结构，在您的情况下，List-Group with Linked Items具有如下结构：
<div class="list-group">
<a class="list-group-item"></a>
<a class="list-group-item"></a>
...
</div>
and then add the styling classes to the anchors <a>.
然后将样式类添加到锚点<a>。
In the end it should look like this :
最后它应该是这样的：
<div class="list-group">
<a href="#" class="list-group-item">Cras justo odio</a>
<a href="#" class="list-group-item list-group-item-danger">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-warning">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-success">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-info">Vestibulum at eros</a>
</div>
Please have a look at the fiddle here that shows this working : https://jsfiddle.net/bafforosso/whLhohew/
请查看此处显示此工作的小提琴：https: //jsfiddle.net/baforosso/whLhohew/
