0

この JSFiddle デモ ( http://jsfiddle.net/4K5Sk/1/ )が表示された場合、次の画面が表示されます。

ここに画像の説明を入力

なぜ「TEST 1」の行から始まらないのですか？

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#menu1">menu 1</a></li>
        <li><a href="#menu2">menu 2</a></li>
        <li><a href="#menu3">menu 3</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="container-fluid">
    TEST 1<br />
    TEST 2<br />
    TEST 3<br />
    TEST 4<br />
    TEST 5<br />        
</div>
4

3 に答える 3

0

Bootstrap 3 ドキュメント ( http://getbootstrap.com/components/#navbar-fixed-top ) から...

「本文のパディングが必要です。固定ナビゲーション バーは、上部にパディングを追加しない限り、他のコンテンツをオーバーレイします。独自の値を試すか、以下のスニペットを使用してください。ヒント: デフォルトでは、ナビゲーション バーの高さは 50 ピクセルです。」

body { padding-top: 70px; }
于 2013-11-12T15:15:12.473 に答える
0

ナビの位置が固定されているので。この要素は、ページの高さには影響しません。つまり、コンテナを押し下げません。

これを修正するには、コンテナに margin-top を追加して、ナビゲーションの下に配置します (これはナビゲーションの高さであるため、50px で十分です)。

http://jsfiddle.net/4K5Sk/2/

.container-fluid{
    margin-top:50px;
}
于 2013-11-12T12:15:07.103 に答える