引导导航条-不能改变字体颜色

So for some reason I can't change font color of my Bootstrap navbar - it keeps appearing blue. I've tried changing the background color of the navbar but with the same result. It was OK (white) until I set the background color to 'transparent' for the navbar to look the way I wanted it to look, but I thought it won't be a problem to change it later on so I didn't pay attention to it. Thanks for your response.

因此，由于某种原因，我不能改变我的引导导航条的字体颜色——它一直呈现蓝色。我尝试过改变导航条的背景颜色，但是结果是一样的。直到我将背景颜色设置为“透明”，让导航条看起来像我想要的样子，这是可以的(白色)，但我认为以后改变它不会有问题，所以我没有注意到它。谢谢你的回应。

CSS

CSS

.navbar {

position:absolute;
top:25px;
z-index:10;
width:100%;
background-color: transparent;
padding-right: 20px;
font-family: 'Droid Sans', sans-serif;
font-size: 17px; 
color: white;
}

HTML

HTML

<div class="bannerContainer">
<nav class="navbar">
  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <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">Brand</a>
</div>    
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
          </ul>
        </li>
    <li><a href="#">Link</a></li>
  </ul>
</div><!--/.nav-collapse -->
</nav>

4 个解决方案

#1

That's because this rule :

这是因为这条规则:

a {
    color: #428bca;
    text-decoration: none;
}

To override it, use this CSS :

要覆盖它，请使用这个CSS:

.navbar a {
    color: white;
}

#2

Try with !important

重要的尝试!

color: white !important;

#3

You need to use this property

你需要使用这个属性

.navbar-nav>li>a {
 color : //desired color here
}

in case of inverse navbar

如果是反navbar

.navbar-inverse .navbar-nav > li > a {
  color : //desired color here
}

#4

Advice to use bootstrap is always good to be well specified in your CSS. for example the color of your font you can change it to directly

建议使用引导程序在CSS中很好地指定。例如，您可以直接将字体的颜色更改为

a{
  color: white 
}

but there are cases that the specificity of Bootstrap is higher and does not let you change it even if you put "!important". In that case it is better to attack the "a" where it is relatively For example.

但也有一些情况，引导程序的特异性更高，即使你输入“!important”，也不会让你改变它。在这种情况下，最好攻击“a”，比如相对而言。

.navbar a{
  color: white 
}

#1