Posted at

bootstrapでnavbar-fixed-topを指定するときはbodyにpaddingが必要

More than 3 years have passed since last update.


tl;dr

Boostrapを使っていて、navbar-fixed-topもしくはnavbar-fixed-bottomを使うときは、

bodyにpaddingを入れる。

じゃないと他のエレメントに重なる。


ドキュメント

以下はnavbar-fixed-topについての説明。

bootstrapのドキュメントに注意書きが書いてあった。


簡単に翻訳

Body paddingが必要です

もし<body>toppaddingを指定していなかった場合、固定navbarは他のコンテンツに重なってしまいます。下記のスニペットを利用するか、ご自身で値を設定してください。TIP: デフォルトでは、navbarの高さは50pxです。

body { padding-top: 70px; }

これが、core Bootstrap CSSの後にインクルードされているかを確かめてください。


サンプル

試してみたものは下記。


参考