我正在使用最新版本的Bootstrap来设计一个网站,我遇到了一个看似错误的东西.你可以
view it here作为JSFiddle.
如果我添加一个标准的固定位置顶部导航栏然后添加一些内容,后续内容会被拉高约60px,因此最终会在顶部导航栏下面.所以我查看了Bootstrap examples pages并发现了一些内联CSS(在head部分中)显然用于纠正这个问题：
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
这让我感到非常惊讶,我想知道这是否是Bootstrap中一个被忽视的错误的结果,或者我是否应该这样做.
如果是后者,我会非常有兴趣知道为什么我应该在Bootstrap应该是一个随时可用的CSS解决方案时使用内联CSS.
解决方法
从
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.
.navbar-fixed-top的位置是固定的,因此填充不会影响任何其他元素.
编辑
“两个.css之间”的建议有助于防止移动设备出现问题.由于位置：固定在许多设备上被破坏,导航栏变为静态,而< body> padding在顶部创建一个空白换行.因此bootstrap-responsive.css会覆盖该视口的此填充.
@media (min-width: 979px) {
body {
padding-top: 60px;
}
}
