[解決済み】トップナビゲーションバーがページ上部のコンテンツをブロックしてしまう件
2022-03-28 19:40:31
質問
私は次のようなTwitter Bootstrapのコードを持っています。
<div class='navbar navbar-fixed-top'>
<div class='navbar-inner'>
<div class='container'>
<a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</a>
<div class='nav-collapse'>
<ul class='nav'>
<li class='active'>
<a href='some_url'>My Home</a>
</li>
<li>
<a href='some_url'>Option 1 </a>
</li>
<li>
<a href='some_url'>Another option</a>
</li>
<li>
<a href='some_url'>Another option</a>
</li>
</ul>
</div>
</div>
</div>
</div>
しかし、ページの冒頭を表示しているときに、ナビバーがページ上部付近にあるコンテンツの一部をブロックしています。 ページ上部を見たときに、残りのコンテンツを下に押し下げて、コンテンツがナビバーにふさがれないようにする方法について、何かアイデアはありませんか?
解決方法は?
CSSに追加してください。
body {
padding-top: 65px;
}
から Bootstrapのドキュメント :
固定ナビバーは、本文の上部にパディングを追加しない限り、他のコンテンツに重なってしまいます。
関連
-
[解決済み】@font-faceが機能しない。
-
[解決済み】bootstrap 3で画像にテキストを回り込ませる
-
[解決済み] "セレクタ(CSS)にIDを使うな "なら、IDの代わりに何を使えばいい?
-
[解決済み] Bootstrap 4のナバーボタンのアイコンの色を変更するにはどうすればよいですか?
-
[解決済み] select2入力の幅を設定する(Angular-uiディレクティブを使用)
-
[解決済み] 入力・テキストフィールドの背景色
-
[解決済み] codepenでfont awesomeを使用する
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] HTMLページでスクロールバーを非表示にする
-
[解決済み] Twitter Bootstrap: コンテナ内のdivを100%の高さにする
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】div間の空白を削除する
-
[解決済み] divをクリックすると、その下にある要素に移動します。
-
[解決済み] "セレクタ(CSS)にIDを使うな "なら、IDの代わりに何を使えばいい?
-
[解決済み] <div style="display:none">によるテーブルデータの非表示。
-
[解決済み] iframe 要素の scrolling 属性は廃止されました。代わりにCSSを使用してください。
-
[解決済み] ブラウザでCSSファイルが更新されない
-
[解決済み] bootstrap 4 でカードブロックの不透明度を変更する方法
-
[解決済み] JavaFX Labelの文字色を変更する方法
-
[解決済み] svgの円のダブルストロークの色
-
[解決済み】twitter bootstrapのナビバーが上に重なるのを修正したサイト