ホームページ >ウェブフロントエンド >CSSチュートリアル >レスポンシブ ブートストラップ デザインで固定ナビゲーションバーがページ コンテンツを覆い隠すことを防ぐ方法
レスポンシブ ブートストラップ デザインで固定ナビゲーションバーがページ コンテンツを覆い隠すことを防ぐ方法
- Patricia Arquetteオリジナル
- 2024-11-21 04:00:12590ブラウズ
ページ開始時のナビゲーションバーによるコンテンツの妨害の解決
固定 Twitter Bootstrap ナビゲーションバーを使用している場合、ナビゲーションバーが上部のページコンテンツを隠してしまうという問題がよく発生します。この記事では、この問題を解決する解決策を紹介します。
<div class='navbar navbar-fixed-top'></p> <pre class="brush:php;toolbar:false"><div>
ページに単純なパディングを追加することは解決策のように思えるかもしれません:
body {</p><pre class="brush:php;toolbar:false">padding-top: 60px;}
このアプローチは、レスポンシブなブートストラップ デザインにとっては欠陥があります。ビューポートのサイズを変更すると、ページのトップとナビゲーションバーの間に隙間ができます。
正しい解決策には、メディア クエリを使用して、画面の幅に基づいてページのパディングを調整することが含まれます:
body {</p><pre class="brush:php;toolbar:false">padding-top: 60px;}
@media (最大幅: 979px) {
body {
padding-top: 0px;
}}
This変更により、さまざまな画面サイズにわたって一貫したデザインを維持しながら、ページのコンテンツがナビゲーションバーによって妨げられないようになります。
以上がレスポンシブ ブートストラップ デザインで固定ナビゲーションバーがページ コンテンツを覆い隠すことを防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。