bootstrap 4改变导航药丸活动的颜色答案

【问题标题】：bootstrap 4 change color of nav-pill activebootstrap 4改变导航药丸活动的颜色
【发布时间】：2018-02-22 23:06:02
【问题描述】：

我可以为每个药丸指定自定义背景颜色，但我真正想要的是每个自定义药丸都有一个褪色的颜色（这只是改变上面的值的问题），并让颜色与相应药丸的全色相匹配。

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

什么时候

一粒活性>红色
药丸二活性>蓝光
三粒活性>黑色

我的代码

<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);
}

引导覆盖

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

【问题讨论】：

有问题吗？
@phiter 很抱歉不清楚，是的，不幸的是我想不出其他方式来表达它，每个药丸的自定义活性颜色。
@ZimSystem 我确实尝试了一些随意的组合，希望能走运，因为我不擅长。我添加了我所做的以覆盖引导活动代码以更改颜色，并且没有其他任何内容，除了与 pill-1 相同的药丸 2 和药丸 3，除了颜色值。

标签： css bootstrap-4

【解决方案1】：

对有效/无效药丸使用适当的 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;
}

【讨论】：

完美。谢谢。应该对你投反对票，我说过非活动褪色；）（当然是开玩笑）
谢谢，有帮助！