Why do I have to add padding to <body> when using a fixed-position top navbar in Bootstrap?
Question
I'm using the latest version of Bootstrap to style a site and I have come across what seems like a bug. You can view it here as a JSFiddle.
If I add a standard fixed-position top navbar and then some content after it, the subsequent content gets pulled up by about 60px so it ends up under the top navbar. So I looked at the Bootstrap examples pages and found a bit of inline CSS (in the head section) that is evidently being used to correct this:
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
This surprised me a great deal and I'm wondering if this is the result of an overlooked-bug in Bootstrap or if I should be doing this as a matter of course.
If the latter is the case, I'd be very interested to know why I should use inline CSS when Bootstrap is supposed to be a ready-to-go CSS solution.
And if the former, I'd very much like to know why this is as it is - why doesn't the Bootstrap CSS just add the padding to the bottom of the navbar or something?
3 answers
solution1
6 ACCPTED 2012-09-27 10:24:12
From the documentation :
Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the
<body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
The .navbar-fixed-top is position: fixed , so a padding will not affect any other element.
EDIT
The "between the two .css" advice helps to prevent an issue with mobile devices. As position: fixed is broken on many devices, navbar goes static and the <body> padding creates a blank wrap on the top. So bootstrap-responsive.css overwrites this padding for that viewports.
You can reproduce that behaviour simply by adding a media query to the rule:
@media (min-width: 979px) {
body {
padding-top: 60px;
}
}
Include this rule on your custom stylesheet and forget <style> tags.
solution2
4 2012-09-27 10:20:14
If you don't add a navigation bar, the padding is not needed. Bootstrap itself cannot know whether this is the case or not, so you need to put this small CSS bit yourself.
solution3
2 2012-09-27 10:29:41
From the documentation:
Add
.navbar-fixed-topand remember to account for the hidden area underneath it by adding at least 40px padding to the<body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.