尝试在 Twitter Bootstrap 中自定义导航药丸答案

【问题标题】：Trying to customize nav-pills in Twitter Bootstrap尝试在 Twitter Bootstrap 中自定义导航药丸
【发布时间】：2014-07-14 03:58:52
【问题描述】：

我想更改药丸的翻转颜色和活动药丸颜色。我的 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;
}

但颜色不会改变。我错过了什么？

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

【问题讨论】：

喜欢这个？ jsfiddle.net/KXje2/12

标签： html css twitter-bootstrap-3 nav-pills

【解决方案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;
}

Demo JSFiddle

【讨论】：