コミュニティ学ぶツールライブラリレジャー

日本語

ホームページ > ウェブフロントエンド > CSSチュートリアル > レスポンシブブートストラップデザインで固定ナビゲーションバーがページコンテンツを覆い隠すことを防ぐ方法

レスポンシブブートストラップデザインで固定ナビゲーションバーがページコンテンツを覆い隠すことを防ぐ方法

Patricia Arquette

リリース： 2024-11-21 04:00:12

オリジナル

569 人が閲覧しました

How to Prevent Fixed Navbars from Obscuring Page Content in Responsive Bootstrap Designs?

ページ開始時のナビゲーションバーによるコンテンツの妨害の解決

固定 Twitter Bootstrap ナビゲーションバーを使用している場合、ナビゲーションバーが上部のページコンテンツを隠してしまうという問題がよく発生します。この記事では、この問題を解決する解決策を紹介します。

<div class='navbar navbar-fixed-top'></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

ログイン後にコピー

ページに単純なパディングを追加することは解決策のように思えるかもしれません:

body {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">padding-top: 60px;

ログイン後にコピー

}

このアプローチは、レスポンシブなブートストラップデザインにとっては欠陥があります。ビューポートのサイズを変更すると、ページのトップとナビゲーションバーの間に隙間ができます。

正しい解決策には、メディアクエリを使用して、画面の幅に基づいてページのパディングを調整することが含まれます:

 body {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">padding-top: 60px;

ログイン後にコピー

}
@media (最大幅: 979px) {