无法更改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规范详细阐述了这一点。

Answer 3

.navbar .nav > li > a {
    float: none;
    color: #5FC8D6;
    background-color: #002E36;
}
.navbar .nav > li > a:hover {
    float: none;
    color: #002E36;
    background-color: #5FC8D6;
}

Answer 4

它的工作原理......试一试.......

.navbar-nav > li > a:link
{
color:red;
}

Answer 5

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

奇迹般有效！ 在另一个线程上找到它，所以我不相信它。