1

Twitter Bootstrap ヘッダーを作成する次のコードがあります。ヘッダーは機能的には問題なく機能しますが、小さいブラウザーを使用してヘッダーを最小化してドロップダウン メニューにすると、ヘッダーの背景が Web ページの前に表示されません。たとえば、ヘッダーのテキストは前に表示されますが、画像やテキスト入力などはドロップダウンの背景の前に表示されます。Twitter のブートストラップ CSS は変更していません。ここに私の HTML を示します。

<div class="navbar navbar-fixed-top">
              <div class="navbar-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="/">Exployre</a>
                  <div class="nav-collapse">
                    <ul class="nav">

                      <li><a href="/map">Find</a></li>
                      <li><a href="/shareadventure">Share</a></li>
                      <li><a href="/connect">Connect</a></li>
                      <li><a href="/posts">Discuss</a></li>
                      <li><a href="/profile">Profile</a></li>
                      <li><a href="/about">About</a></li>
                      <li>
                  <li>        
                <form action="/search" class="navbar-search">
                  <div>
                    <input type="text" placeholder="Search" class="search-query pull-right" name="q" size="55" />
                  </div>
                </form>
                  </li>

                    </ul>
                  </div><!--/.nav-collapse -->
                </div>
              </div>
            </div>
4

1 に答える 1

5

デザインの問題？おそらく（CSSスタイルシートで何も変更していない場合）

このセレクターにはこの CSS プロパティがあります

.navbar-fixed-top, .navbar-fixed-bottom {
  position: fixed;
  /* other properties */
}

しかし、メディアクエリがこれを取得した後

@media (max-width: 979px)
.navbar-fixed-top, .navbar-fixed-bottom {
  position: static;
}

それposition: static;が原因です...それはどちらかであるかrelative/fixed、単にそれを削除する必要があります。

出典：

....position: static は、「左、上、z-index などからの配置命令をすべて無視する」ことを意味します。

于 2012-11-06T19:54:33.873 に答える