更改导航栏文本颜色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;
}

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

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中展示过

Answer 2

.nav-link {
color: blue !important;
}

为我工作。引导程序 v4.3.1

Answer 3

要更改导航栏中的文本颜色，您可以使用内联 css 作为；

<a style="color: #3c6afc" href="#">

Answer 4

从bootstrap 4开始,答案是简单地在nav元素中设置navbar-dark,这将设置文本和链接到灯光主题.

<nav class="navbar navbar-dark">