html - 在 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？
谢谢和亲切的问候。
更新：
建议的答案是使用小提琴，但不在我的代码中。
引导程序版本：引导程序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>

最佳答案

编辑：以下仅适用于bootstrap v3.1.0+，如果您绝对需要使用旧版本，则需要使用自定义类并将其与css一起设置样式。
你的第一个组合很完美。
请确保您遵循组件的确切结构，在包含链接项的案例列表组中，链接项的结构如下：

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