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

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 不只是将填充添加到导航栏的底部或其他东西？

score 6 · Accepted Answer

从文档中：

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

.navbar-fixed-topis ，position: fixed所以 apadding不会影响任何其他元素。

编辑

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

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

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

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

score 4 · Accepted Answer

如果不添加导航栏，则不需要填充。Bootstrap 本身无法知道是不是这样，所以你需要自己放这个小 CSS 位。

score 2 · Accepted Answer

从文档中：

添加.navbar-fixed-top并记住通过向<body>. 请务必在核心 Bootstrap CSS 之后和可选的响应式 CSS 之前添加它。

3 回答 3