更改Twitter bootstrap Nav-Pills的颜色

Question

我正在尝试更改每个选项卡的活动颜色(单击后仍然是twitter的浅蓝色)：

 <ul class="nav nav-pills">
   <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
   <li><a href="#tab2" data-toggle="tab">Sample</a></li>
   <li><a href="#tab3" data-toggle="tab">Sample</a></li>
 </ul>

(如何)我可以在CSS中这样做吗？

Answer 1

您可以使用活动链接的自定义颜色为nav-pills容器提供您自己的类，这样您就可以创建任意数量的颜色，而无需修改页面其他部分中的引导默认颜色。试试这个：

标记

<ul class="nav nav-pills red">
    <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
    <li><a href="#tab2" data-toggle="tab">Sample</a></li>
    <li><a href="#tab3" data-toggle="tab">Sample</a></li>
</ul>

下面是您的自定义颜色的CSS：

.red .active a,
.red .active a:hover {
    background-color: red;
}

此外，如果您希望替换nav-pills中.active项目的默认颜色，则可以修改原始颜色，如下所示：

.nav-pills > .active > a, .nav-pills > .active > a:hover {
    background-color: red;
}

Answer 2

投票最多的解决方案对我不起作用。(Bootstrap 3.0.0)，然而，它做到了：

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    color:black;
    background-color:#fcd900;
    }

在页面上包含这个<style></style>标记可以很好地满足每个页面的要求

将它混合在两种色调上会产生很棒的效果，比如：

<style>
    .nav-pills > li.active > a, .nav-pills > li.active > a:focus {
        color: black;
        background-color: #fcd900;
    }

        .nav-pills > li.active > a:hover {
            background-color: #efcb00;
            color:black;
        }
</style>

Answer 3

对于Bootstrap4.0(在输入时使用的是alpha )，您应该在a元素上指定.active类。

对我来说，只有以下方法有效：

.nav-pills > li > a.active {
    background-color: #ff0000 !important;
}

!important也是必要的。

--

编辑:根据CodeMantle下面的评论，在!important之前添加了空格