在引导程序中列出具有背景颜色的链接项的组

Question

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>

我需要将背景颜色更改为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>

技巧部分是我无法合并两个示例，以下组合不起作用：

<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">

所以问题......

可以使用bootstrap类更改此设置，还是可以覆盖某些css？

谢谢和亲切的问候。

更新
建议的答案是小提琴而不是我的代码 Bootstrap版本：Bootstrap v3.0.0
该小组是一个小组内容。

完整代码：

            <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>

Answer 1

编辑：以下仅适用于Bootstrap v3.1.0 +，如果您绝对需要使用旧版本，则需要使用自定义类并使用CSS设置样式。

你的第一个组合完美无缺。

请确保您遵循组件的确切结构，在您的情况下 List-Group with Linked Items ，其结构如下：

<div class="list-group">
    <a class="list-group-item"></a>
    <a class="list-group-item"></a>
    ...
</div>

然后将样式类添加到锚点<a>。

最后它应该是这样的：

<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>

请查看此处显示此工作的小提琴：https://jsfiddle.net/bafforosso/whLhohew/