无法更改Bootstrap导航栏中的文本颜色

Question

我一直在尝试更改引导程序模板的导航栏中的文本颜色,但一直没有成功.谁知道我哪里出错了？这是我的代码.

<!--navbar-->
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner" id="nav-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Restaurant</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
          <li><a href="#">Link</a></li>
          <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="#">Action</a></li>
              <li><a href="#">Another action</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-search pull-right" action="">
          <input type="text" class="search-query span2" placeholder="Search">
        </form>
      </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
<!--navbar-->

CSS:

.navbar-inner {
    color: #FFF;
}

我也试过这个:

#nav-inner {
    color: #FFF;
}

Answer 1

如果要更改选项卡的css,则需要添加color: #ddd;到以下内容中

.navbar .nav > li > a {
    float: none;
    line-height: 19px;
    padding: 9px 10px 11px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color:  #ddd;
}

希望能帮助到你!!

Answer 2

我的猜测是Bootstrap定义了一个更具体的CSS规则,它胜过你更普遍的规则.您应该使用Firefox或Chrome的开发人员工具检查该页面,以查看哪些样式胜过其他样式.如果你的风格甚至没有出现,那么你知道有一个更基本的问题,但如果Bootstrap的风格覆盖你的颜色,你必须给你的风格更高的优先级.

要进行健全性检查,请尝试以下过度杀伤规则:

html body .navbar .navbar-inner .container {
    color: #FFF;
}

如果有效,那么试验一个较低的特异性,看看你真正需要具体的具体程度.

如果一切都失败了,你可以随时做:

color: #FFF !important;

在CSS2规范详细规定了这一点.