私は自分のサイトでブートストラップを使用していますが、固定されたナビゲーション バー トップに問題があります。通常のナビゲーション バーを使用しているときは、すべて問題ありません。ただし、固定されたナビゲーション バー トップに切り替えようとすると、サイト上の他のすべてのコンテンツが、ナビゲーション バーが存在しないかのように上に移動し、ナビゲーション バーが重なって表示されます。基本的に、次のようにレイアウトしました。
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
私はブートストラップの例を正確にコピーしようとしましたが、ナビゲーション バーを固定上部に使用したときにのみこの問題が依然として発生します。何が間違っているのでしょうか?
ベストアンサー1
あなたの答えはドキュメント:
ボディパッドが必要
固定ナビゲーション バーは、
padding上部に追加しない限り、他のコンテンツの上に重なります<body>。独自の値を試すか、以下のスニペットを使用してください。ヒント: デフォルトでは、ナビゲーション バーの高さは 50 ピクセルです。body { padding-top: 70px; }必ず、コア Bootstrap CSSの後にこれを含めてください。
そしてBootstrap 4 のドキュメントでは...
固定ナビゲーション バーは position: fixed を使用します。つまり、DOM の通常のフローから取得され、他の要素との重なりを防ぐためにカスタム CSS (たとえば、 の padding-top) が必要になる場合があります。