如何修改Bootstrap 4激活状态Nav Pills的背景色

我之前也碰到过一模一样的问题——搜了好多种方法，结果都只能修改Bootstrap 4 Nav Pills获得焦点时的背景色，完全搞不定激活（active）状态的样式。后来我干脆直接去翻了Bootstrap 4的原生CSS文件，终于找到了正确的选择器组合！

你只需要覆盖下面这段CSS代码，就能轻松修改激活状态Nav Pills的背景色和文字颜色：

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #007bff; /* 这里换成你想要的背景色 */
}

把这段代码加到你的自定义CSS文件里（确保加载顺序在Bootstrap CSS之后），替换掉#007bff为你需要的颜色值就行，这样激活状态的导航胶囊样式就会按照你的设置显示了。

希望这个方案能帮到和我有同样需求的开发者！

内容的提问来源于stack exchange，提问作者Cornelius Labuschagne