Menu
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?
320
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.
184
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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
