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

Question

I'd like to change the rollover color of the pills and the active pill color. My html looks like this:

 <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>

And my CSS looks like this:

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

But the color won't budge. What am I missing?

(I'd also like to change the font... but maybe that's too ambitious.)

Answer 1

Change your CSS like so:

CSS

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

Just make sure you are targeting the exact item you want to change. If you want only the active pill to be red, then comment out the following CSS to take the hover color-effect away:

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

Demo JSFiddle