[解決済み] Bootstrap 3でnavbar-static-topは何をするのですか?
質問
のドキュメントによると Bootstrap 3 のナビバーの静的トップが ,
<ブロッククオート静止トップ .navbar-static-topを追加して、ページとともにスクロールするフルワイドナビゲーションバーを作成し、.containerまたは.container-fluidを含めて、ナビバーのコンテンツを中央に配置してパッドにします。
.navbar-fixed-*クラスとは異なり、ボディのパディングを変更する必要はありません。
このメソッドは何をするのですか?上記のドキュメントを見ると、ページを下にスクロールしてもナビバーは画面上部に固定されているように見えます。しかし、それは何の
.navbar-fixed-top
が行うもので、私が
.navbar-fixed-top
を使用すると、私が述べたとおりの動作になります。
しかし
.navbar-static-top
とは何が違うのかわかりません。
.navbar-default
. どなたか、その違いを明確にするために、また
.navbar-static-top
を行うのでしょうか?
どのように解決するのですか?
navbar-static-top
で作成された左、右、上のボーダーを削除します。
navbar-default
を使用すると、ページの最上部でより見栄えが良くなります。
navbar-default
他のページで...
navbar-static-top。 http://bootply.com/129342
一方
navbar-fixed-top
は
position:fixed
. ページ上にビューポートより下に広がるコンテンツがある場合(ほとんどのページでそうです)には、このページでは
navbar-fixed-top
は上に張り付いたままになりますが
navbar-static-top
はスクロールしていきます。そのため
navbar-fixed-top
が固定されているため、ページのコンテンツに重ならないように、ボディにpadding-topを付ける必要があります...
navbar-fixed-top: http://bootply.com/129345
それぞれの例でスクロールダウンすると、トップナビゲーションバーの反応が異なることがおわかりいただけると思います。
関連
-
[解決済み] svgの円のダブルストロークの色
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] Bootstrap 3 の sr-only とは何ですか?
-
[解決済み] Twitter Bootstrapでナビバーの色を変更する
-
[解決済み] 位置は固定だが、容器に対して相対的
-
[解決済み] ボディのスクロールを防止し、オーバーレイのスクロールを可能にする
-
[解決済み】twitter bootstrapのナビバーが上に重なるのを修正したサイト
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] リンクにアニメーションGIFを表示し、ホバーとリセットで再生する方法
-
[解決済み] cssによる波状の形状
-
[解決済み] アニメーションディレイが効かない
-
[解決済み] JavaFX Labelの文字色を変更する方法
-
[解決済み] CSSで0を指定する場合、明示的に単位を表記するべきか、省略するべきか。
-
[解決済み] HTMLとCSSのBackground-imageが表示されない
-
[解決済み] 四角いボタンの作り方
-
[解決済み] CSSで背景画像を着色する方法を教えてください。
-
[解決済み] ChromeでCSSが効かない
-
[解決済み] Atomエディタで透明な背景を設定する方法は?