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

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

所以问题....

是否可以通过引导类来改变这一点，或者覆盖一些 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/