Navbar-fixed-top 将内容向上推送答案

【问题标题】：Navbar-fixed-top pushes content on page upNavbar-fixed-top 将内容向上推送
【发布时间】：2014-07-08 18:24:43
【问题描述】：

我目前在我的页面顶部有一个静态导航栏，但是当我尝试修复它时，它总是“吃掉”它下面的内容。

有没有办法解决这个问题？

【问题讨论】：

【解决方案1】：

当您将 navbar-fixed-top 类添加到导航栏时，它会应用两个主要的 CSS 属性：

position: fixed;
top: 0;

这会将 div 固定在页面顶部。然而，这样做意味着下面的 div 正好从导航栏之前的位置开始。像这样想，导航栏现在漂浮在周围，所以其他一切都不知道它的存在。因此，您需要将页面的其余部分稍微向下推以进行补偿。

只需在正文内容上放置一个 margin-top 即可将其向下推。

margin-top: 60px;

我将其添加到 CSS 中：

.body-content {
  margin-top: 60px;
}

然后将body-content 类添加到下一个容器中。

【讨论】：

很奇怪，它非常适合该代码，但对于我所拥有的却不是那么好。您能否解释一下为什么它首先会这样做，即是否有一些其他 CSS 代码可能会干扰您建议添加的内容并导致仍然存在问题？
好的，我已经添加了更多解释。希望对您有所帮助。
由于某种原因，添加 body { padding-top: 76px; } @media screen and (max-width: 768px) { body { padding-top: 0px; } } 相反解决了我的问题。很奇怪。
这基本上是一样的，但为了更小的屏幕尺寸将其删除。不要忘记投票/接受答案！
感谢您的解释。是的，body { padding-top: 76px; } @media screen and (max-width: 768px) { body { padding-top: 71px; } } 似乎对我来说效果更好，但至少我现在明白了 xD。再次感谢。