12

我一直在尝试更改引导模板导航栏中的文本颜色，但没有成功。有人知道我要去哪里错了吗？这是我的代码。

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

5 回答 5

35

如果要更改选项卡的 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;
}

希望能帮助到你！！

于 2012-11-18T05:00:38.917 回答
13

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

对于健全性检查，试试这个矫枉过正的规则：

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

如果这行得通，那么就尝试使用较低级别的特异性，看看你真正需要达到的具体程度。

如果一切都失败了，你总是可以这样做：

color: #FFF !important;

CSS2 规范对此进行了详细说明。

于 2012-11-18T05:09:19.957 回答
2 
.navbar .nav > li > a {
    float: none;
    color: #5FC8D6;
    background-color: #002E36;
}
.navbar .nav > li > a:hover {
    float: none;
    color: #002E36;
    background-color: #5FC8D6;
}
于 2014-12-23T14:21:43.190 回答
0

可以的。。。试试看。。。。。。

.navbar-nav > li > a:link
{
color:red;
}
于 2015-01-13T20:14:22.513 回答
0 
nav.navbar-nav.navbar-right li a {
    color: blue;
}

Works like a charm! Found it on another thread, so am not taking credit for it.

于 2015-08-03T04:14:38.457 回答