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

color: #ddd;タブのCSSを変更する場合は、以下に追加する必要があります

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

チャームのように機能します！別のスレッドでそれを見つけたので、それを信用していません。

于 2015-08-03T04:14:38.457 に答える