更改导航栏文本颜色 Bootstrap

Question

我目前有这段 html 代表我的导航栏的相关部分：

 <nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span> Portfolio</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> R&eacute;sum&eacute;</a></li>
        </ul>
    </div>
</nav>

我有这段 css，我希望用它来更改导航栏的文本颜色：

 .nav.navbar-nav.navbar-right {
    color: blue;
}

唯一的问题是文本颜色保持不变。我还看到一个非常 相似的问题 没有得到解决。我敢打赌，谁能解决这个问题，谁就能解决另一个问题。

原文由 Quinn McHugh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使它成为以下内容：

 .nav.navbar-nav.navbar-right li a {
    color: blue;
}

以上将针对特定链接，这是您想要的，而不是将整个列表设置为蓝色，这是您最初所做的。这是一个 JsFiddle 。

另一种方法是创建另一个类并像这样实现它：

HTML

 <li><a href="#" class="color-me"><span class="glyphicon glyphicon-list-alt"></span> R&eacute;sum&eacute;</a></li>

CSS

 .color-me{
    color:blue;
}

也在这个 JsFiddle 中展示

原文由 BuddhistBeast 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

从 bootstrap 4 开始，答案是简单地在 nav 元素中设置 navbar-dark，这会将文本和链接设置为浅色主题。

 <nav class="navbar navbar-dark">

原文由 Leon 发布，翻译遵循 CC BY-SA 4.0 许可协议