0

Twitter ブートストラップを使用してレスポンシブ Web サイトを開発しています....
ブラウザー ウィンドウを縮小すると、ナビゲーション バーが折りたたまれます....
しかし、折りたたまれたナビゲーション バーでは、背景色を表示する必要があります....
しかし、背景画像が表示されます. background-color: #14486b;
この背景画像はどこから出てくるのかわからない

<div class="nav-collapse in collapse" style="height: auto;">
            <ul class="nav">
              <li class="active"><a href="/docs/examples/product.html">Product</a></li>
              <li><a href="/docs/examples/solution.html">Solutions</a></li>
              <li><a href="/docs/examples/service.html">Services</a></li>
              <li class="iphonePartnerLink"><a href="/docs/examples/partner.html">Partners</a></li>
              <li class="iphoneContactLink"><a href="/docs/examples/contact.html">Contact</a></li>
            </ul>

            <ul class="nav" id="navSecond">
              <li class=""><a href="/docs/examples/partners.html">Partners</a></li>
              <li><a href="/docs/examples/contact.html">Contact</a></li>
            </ul>
            <form class="navbar-form pull-right">
              <input class="span2" type="text" placeholder="Email">
              <input class="span2" type="password" placeholder="Password">
              <button type="submit" class="btn">Sign in</button>
            </form>
          </div>
4

2 に答える 2

0

メディアクエリを使用して、画像を背景色に置き換える必要があります。

 @media (min-width: 768px) and (max-width: 979px) {

         .navbar-inner{
                 background-image: url("http://www.defie.co/designerImages/bg_bar.png");/*remove this */
                 background-color:#14486b;
               }

           }

 /* Landscape phone to portrait tablet */
  @media (max-width: 767px) {

           .navbar-inner{
                 background-image: url("http://www.defie.co/designerImages/bg_bar.png");
                 background-color:#14486b;
               }
        }

 /* Landscape phones and down */
  @media (max-width: 480px) {

             .navbar-inner{
                 background-image: url("http://www.defie.co/designerImages/bg_bar.png");
                 background-color:#14486b;
               }
        }

上部のナビゲーションバーを修正する場合：

.navbar {
 left: 0;
 position: absolute;/*remove this line if you want to fix it */
 right: 0;
 top: 0;
  }

コメント後の編集：メディアクエリで背景画像をnoneに設定し、色は次のようにコメント化されています。

@media (max-width:980px){
         .navbar-inverse .navbar-inner{
          background-image: none;
          /*background-color: red;*/
        }
       }
@media (max-width: 767px) {
     .navbar-inverse .navbar-inner {
  background-image: none;
    /*background-color: red;*/
     }
    }

    @media (max-width: 480px) {
      .navbar-inverse .navbar-inner{
          background-image: none;
          /*background-color: red;*/
        }
      }

上記のスタイルに置き換えてください。

于 2013-03-05T01:38:41.593 に答える
0

画像がどこから来ているのか、分析してみてください。そのための適切なツールは、Firefox の Firebug https://addons.mozilla.org/de/firefox/addon/firebug/ または Chrome の開発ツールです (Chrome で F12 を押して開きます)。どちらのツールでも、DOM ツリーの単一のコンポーネントを調べて、添付されているすべての CSS スタイル (およびそのソース) を確認できます。

理由が背景画像である場合は、次の方法でスタイルを上書きできます。

#idOfComponent {
    background-image:none
}
于 2013-03-04T22:28:46.583 に答える