4

以下のように、ページでマークアップを定義しています。

<div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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 nav-pills">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#">Companies</a>
            </li>
            <li><a href="#">Help</a>
            </li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <ul class="breadcrumb">
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">About</a>
            </li>
            <li class="active"><a href="#">Help</a>
            </li>
        </ul>
    </div>
</div>

ページがレンダリングされると、ブレッドクラムはナビゲーション バーの後ろに隠れます。それを修正するブートストラップ方法はありますか？それともこれはバグですか？

Ps: jsFiddle : http://jsfiddle.net/KNsYt/2/

4

1 に答える 1

11

以下のように、ブートストラップ ドキュメント自体で明確に定義されています。

ボディパディングが必要

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

したがって、この問題を解決するには、body に 50 ピクセル以上のパディングを与えます。このフィドルをチェックしてください。

コア Bootstrap CSS の後に必ずこれを含めてください。

body {
padding-top:60px
}
于 2013-08-23T09:20:41.413 に答える