更改导航栏文本颜色 Bootstrap [英] Change navbar text color Bootstrap

问题描述

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

<div class="容器"><ul class="nav navbar-nav navbar-right"><li><a href="#"><span class="glyphicon glyphicon-user"></span>关于</a></li><li><a href="#"><span class="glyphicon glyphicon-earphone"></span>联系</a></li><li><a href="#"><span class="glyphicon glyphicon-briefcase"></span>投资组合</a></li><li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>R&eacute;sum&eacute;</a></li>

</nav>

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

.nav.navbar-nav.navbar-right {颜色:蓝色；}

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

解决方案

使其如下:

.nav.navbar-nav.navbar-right li a {颜色:蓝色；}

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

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

HTML

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

CSS

.color-me{颜色:蓝色；}

也在这个 JsFiddle

中演示

I currently have this piece of html which represents the relevant part of my navbar:

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

And I have this piece of css which I was hoping to use to change the text color of the navbar:

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

The only problem is that the text color remains unchanged. I also saw that a very similar question went unsolved. I bet whoever can solve this one can solve the other too.

解决方案

Make it the following:

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

The above will target the specific links, which is what you want, versus styling the entire list blue, which is what you were initially doing. Here is a JsFiddle.

The other way would be creating another class and implementing it like so:

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

Also demonstrated in this JsFiddle

这篇关于更改导航栏文本颜色 Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！