试图在Twitter Bootstrap中自定义nav-pills

Question

我想改变药丸的翻转颜色和活性药丸的颜色。 我的HTML看起来像这样：

 <div class="theme">
    <div class="banner">
        <h1>Sandstorm</h1>
        <ul class="nav nav-pills red">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

我的CSS看起来像这样：

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

但颜色不会让步。 我错过了什么？

（我也想改变字体...但也许这太雄心勃勃了。）

Answer 1

像这样改变你的CSS：

CSS

.red .active a,
.red .active a:hover{
    background:red !important;
}
.red a:hover {
     background: red !important;
    color:white;
}

只需确保定位您要更改的确切项目即可。 如果你只想让活性药丸变成红色，那么请注释掉下面的CSS以取消悬停颜色效果：

.red a:hover {
     background: red !important;
    color:white;
}

演示JSFiddle