css - 如何在不影响其他活动类的情况下更改 Bootstrap 中活动选项卡的背景颜色

Question

我正在使用 Bootstrap，我有这个列表：

现在，当它处于活动状态时它是蓝色的，我想将其更改为绿色或其他东西。

这是代码：

<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">v1.0.0</a>

那是图片中的单个项目。

当我尝试更改“活动”类时，它会更改我的所有其他组件，我不希望这样。

标签： cssbootstrap-4

Answer 1

也许您所针对的课程不正确，试试这个。如果你分享你完整的代码，也许我们可以看看是否还有其他问题。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  .list-group-item.active {
  background-color: green;
  border-color: green;
}
</style>
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>