レスポンシブ レイアウトで Navbar がページ コンテンツに重ならないようにするにはどうすればよいですか?

ナビゲーションバーのページコンテンツの重なり: レスポンシブレイアウトの解決策

Twitter Bootstrap の上部ナビゲーションバーを上部固定オプションで利用すると、邪魔になる可能性がありますページの上部近くにあるコンテンツ。この問題は、レスポンシブ レイアウトで特に顕著です。

ナビゲーションバーがコンテンツをブロックしないようにするには、body 要素にパディングを追加する必要があります。ただし、静的なパディング値はレスポンシブ デザインには不十分です。

レスポンシブ レイアウトのソリューション:

次の CSS コード スニペットは、以下に基づいてパディングを動的に調整するソリューションを提供します。ウィンドウの幅:

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

このコードは、次のパディングトップを適用します。 body要素までは60px。ただし、ウィンドウの幅が 979 ピクセルを下回ると、padding-top は 0 ピクセルにリセットされます。これにより、ナビゲーション バーが小さい画面のコンテンツと重ならないようになります。

このソリューションは、大きい画面の固定ナビゲーション バーと小さい画面の非固定ナビゲーション バーの間でシームレスな移行を提供し、コンテンツの重なりの問題を防ぎます。

以上がレスポンシブ レイアウトで Navbar がページ コンテンツに重ならないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。