[解決済み】twitter bootstrapのナビバーが上に重なるのを修正したサイト
2022-03-25 17:29:46
質問
私のサイトではブートストラップを使用していますが、ナビバーが上に固定される問題があります。通常のナビバーを使用しているときは、すべてうまくいっています。しかし、私はそれをナバー固定トップに切り替えようとすると、サイト上の他のすべてのコンテンツは、ナバーがそこにないようにシフトアップし、ナバーはそれに重なります。
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
私はブートストラップの例を正確にコピーしようとしましたが、まだこの問題は、ナビゲーションを使用するときにのみ固定トップを持っています。
解決方法は？
の中に答えがあります。 ドキュメント :
ボディパディングが必要
を追加しない限り、固定ナビバーは他のコンテンツに重なります。
paddingの上部にある<body>. 独自の値を試すか、以下のスニペットを使用してください。ヒント：デフォルトでは、ナビバーの高さは50pxです。body { padding-top: 70px; }必ず、次のように記述してください。 の後に を使用することで、BootstrapのコアとなるCSSを作成することができます。
で、その中に Bootstrap 4のドキュメント...
固定ナビバーはposition: fixedを使用します。 DOM の通常のフローに従うため、カスタム CSS (例: padding-top) が必要な場合があります。 を使用することで、他の要素との重なりを防ぐことができます。
関連
-
[解決済み】WebページでWindows 95のフォントを使用する
-
[解決済み] SRCとHREFの違い
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Twitter Bootstrapでナビバーの色を変更する
-
[解決済み] Twitter Bootstrapを使った中央寄せのコンテンツはどうなっているのか？
-
[解決済み] Twitter Bootstrap - 行と行の間に上部のスペースを追加する
-
[解決済み】モバイルレイアウトでBootstrap 3の列の順序を変更するにはどうすればいいですか？
-
[解決済み] Bootstrap 3 フッターを最下部に移動させる。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】iframeの背景色を変更する問題
-
[解決済み】このインラインブロックのdiv要素の間に説明のつかない隙間があるのはなぜですか？[重複］
-
[解決済み] 絶対位置が機能しない
-
[解決済み] 迷子の終了タグ "head"
-
[解決済み] (X)HTMLにおける "PRE "タグの用途は何ですか？
-
[解決済み] HTMLのテーブルを部分的に透明にするには？
-
[解決済み] Angular 2+のテンプレートで値を表す三項演算子
-
[解決済み] Railsです。railsアプリで<img src= >をimage_tagに変換する方法
-
[解決済み] margin-block-startとmargin-topの違いは何ですか？
-
[解決済み】トップナビゲーションバーがページ上部のコンテンツをブロックしてしまう件