Bootstrap 4如何更改nav-pill选中状态的颜色？

Question

Bootstrap 4如何更改nav-pill选中状态的颜色？

cssbootstrap-4

9

我可以为每个药丸指定自定义的背景颜色，但我真正想要的是让每个自定义药丸的颜色变淡（这只需要改变上面的值），并且让活动药丸的颜色匹配相应药丸的完整颜色。

药丸一 > 变淡的红色
药丸二 > 变淡的蓝色
药丸三 > 变淡的黑色

当

药丸一处于活动状态 > 红色
药丸二处于活动状态 > 蓝色
药丸三处于活动状态 > 黑色

我的代码：

<ul class="nav nav-pills">
  <li class="nav-item pill-1">
    <a class="nav-link active" href="#">pill one</a>
  </li>
  <li class="nav-item pill-2">
    <a class="nav-link" href="#">pill two</a>
  </li>
  <li class="nav-item pill-3">
    <a class="nav-link" href="#">pill three</a>
  </li>
</ul>

css

.pill-1 a {
    background-color: rgba(255, 0, 0, 0.5);
}

Bootstrap覆盖

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #d9d9d9;
}

- keneso

1

有问题吗？ - Phiter

@phiter 很抱歉没有表达清楚，是的，不幸的是我想不到其他的措辞，每个药丸都有自定义的活动颜色。 - keneso

@ZimSystem 我尝试了一些随意的组合，希望能有所收获，因为我不擅长这个。我添加了我所做的来覆盖引导程序活动代码以更改颜色，并且除了pill-2和pill-3与pill-1相同但颜色值不同之外，我没有其他东西。 - keneso

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

使用适当的CSS特殊性为激活/非激活的药丸进行样式设置。例如：

https://www.codeply.com/go/Oe6EteovP0

/* not active */
.nav-pills .pill-1 .nav-link:not(.active) {
    background-color: rgba(255, 0, 0, 0.5);
}

.nav-pills .pill-2 .nav-link:not(.active) {
    background-color: rgba(0, 250, 0, 0.5);
}

.nav-pills .pill-3 .nav-link:not(.active) {
    background-color: rgba(0, 0, 250, 0.5);
    color: white;
}


/* active (faded) */
.nav-pills .pill-1 .nav-link {
    background-color: rgba(255, 0, 0, 0.2);
    color: white;
}

.nav-pills .pill-2 .nav-link {
    background-color: rgba(0, 250, 0, 0.2);
}

.nav-pills .pill-3 .nav-link {
    background-color: rgba(0, 0, 250, 0.2);
    color: white;
}