在Bootstrap中使用固定位置顶部导航栏时,为什么必须向<body>添加填充？

Question

我正在使用最新版本的Bootstrap来设计一个网站,我遇到了一个看似错误的东西.你可以在这里以JSFiddle的形式查看它.

如果我添加一个标准的固定位置顶部导航栏然后添加一些内容,则后续内容会被拉高约60px,因此它会在顶部导航栏下面.所以我查看了Bootstrap示例页面,发现了一些内联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.

如果是前者,我非常想知道为什么会这样 - 为什么Bootstrap CSS只是将填充添加到导航栏的底部或者什么？

Answer 1

添加.navbar-fixed-top并记住通过添加至少40px填充来计算其下方的隐藏区域<body>.一定要在核心Bootstrap CSS之后和可选的响应式CSS之前添加它.

该.navbar-fixed-topIS position: fixed,所以padding不会影响任何其他元素.

编辑

"两个.css之间"的建议有助于防止移动设备出现问题.正如position: fixed许多设备上所破坏的那样,导航栏会移动static并且<body>填充在顶部创建一个空白换行.因此bootstrap-responsive.css,为该视口覆盖此填充.

您只需向规则添加媒体查询即可重现该行为:

@media (min-width: 979px) {
    body {
        padding-top: 60px;
    }
}

在自定义样式表中包含此规则并忘记<style>标记.