Question

我使用最新版本的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。

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

Answer 1

来自documentation：

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

.navbar-fixed-top为position: fixed，因此padding不会影响任何其他元素。

编辑

“两个.css之间”的建议有助于防止移动设备出现问题。由于position: fixed在许多设备上被破坏，导航栏会static，而<body>填充会在顶部创建一个空白换行符。因此bootstrap-responsive.css会覆盖该视口的填充。

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

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

在自定义样式表中加入此规则，然后忘记<style>代码。

Answer 2

如果您不添加导航栏，则不需要填充。 Bootstrap本身不知道是否是这种情况，所以你需要自己把这个小的CSS位。

Answer 3

来自文档：

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

http://twitter.github.com/bootstrap/components.html

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

3 个答案: