固定トップ ナビゲーション バーがページ コンテンツを覆い隠すのを防ぐにはどうすればよいですか?

トップ ナビゲーション バーがページ コンテンツを隠している

提供された Twitter Bootstrap コードに見られるように、固定されたトップ ナビゲーション バーが上部を妨げています。ページのコンテンツの。この問題に対処し、ページの上部を表示したときにコンテンツがナビゲーション バーの下に確実に表示されるようにするには、CSS ソリューションの実装が不可欠です。

提案されたソリューションは、body 要素にパディングを適用することで構成されます。 60pxの値。これにより、ページの上部とナビゲーション バーの間にマージンが配置され、コンテンツが事実上ナビゲーション バーの下に押し込まれます。ただし、Bootstrap フレームワークには応答性が組み込まれているため、追加のメディア クエリが利用されます。

メディア クエリでは、画面幅が 979px を下回ると、body 要素のパディングが 0px にリセットされ、ギャップの発生を防ぎます。ページの上部と小さい画面のナビゲーション バーの間にあります。これにより、使用されているデバイスに関係なく、コンテンツが適切に表示されることが保証されます。

以上が固定トップ ナビゲーション バーがページ コンテンツを覆い隠すのを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。