Question

我有以下导航栏HTML：

<nav id="k9nav" class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#k9nav">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">K9SportsCenter</a>
        </div>

        <div class="collapse navbar-collapse" id="k9nav">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Services</a></li>
                <li><a href="#">Plans</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>

在测试如何修改它时，我尝试将所有文本设置为白色，并使用以下CSS对<ul>中的链接应用悬停效果：

#k9nav {
    background-color: blue;
    color: white;
}

#k9nav ol li:hover {
    background-color: black;
    border-bottom: 2px solid red;
}

#k9nav ol li:active {
    background-color: black;
}

不幸的是，结果低于我的预期：

navbar that doesn't look quite right

如果从图片中看不清楚，文字颜色不已变为白色，我想要的悬停效果根本不起作用（不要＆＃39）不用担心，这不是我的真实设计......我只是想看看如何将Bootstrap弯曲到我的意愿中。

我真的只需要知道我应该修改什么来获得我想要的结果。

Answer 1

您在css中定位ol，但在HTML中使用ul

#k9nav ol li

和

<ul class="nav navbar-nav navbar-right">

所以规则没有得到应用。你需要改变其中一个，所以它们相互匹配。

Answer 2

您没有针对正确的元素，原因有两个：

您为无序列表指定了错误的元素。 <ol>应为<ul>
您没有嵌套到适当的级别。

你需要改变这个：

#k9nav ol li:hover {
    background-color: black;
    border-bottom: 2px solid red;
}

#k9nav ol li:active {
    background-color: black;
}

对此：

#k9nav > div > div > ul > li:hover {
    background-color: black;
    border-bottom: 2px solid red;
}

#k9nav > div > div > ul > li:active {
    background-color: black;
}

甚至更好：

.navbar-nav > li {
... styles
}

这是一个更好地解释嵌套的链接：

http://www.htmldog.com/guides/css/intermediate/grouping/

Answer 3

Bootstrap包含针对这些元素的更多特定规则，因此它会覆盖您的规则..

尝试

#k9nav .navbar-brand,
#k9nav.navbar-default .navbar-nav > li > a {
    color:white;
}
#k9nav.navbar-default .navbar-nav > li > a:hover {
    background-color: black;
    border-bottom: 2px solid red;
}

http://jsfiddle.net/gaby/LLgkf/

演示

此外，多次使用k9nav ID，您的html无效。

Answer 4

您需要定位 更具体地 ：

#k9nav ul li a,
#k9nav .navbar-brand {
    color: white;
}

DEMO： http://jsfiddle.net/VT4Fc/1/（从Bootstrap CDN加载css和js）

您的HTML中还有#k9nav的重复ID，我建议您更改。

Bootstrap 3：修改导航栏时出现问题

4 个答案: