导航栏固定顶部将内容向上推

Question

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

静态时启动
修复时启动

有没有什么办法解决这一问题？

Answer 1

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

position: fixed;
top: 0;

这会将div固定在页面顶部。 但是，这样做意味着以下div将从先前的导航栏完全开始。 这样想吧，导航栏现在正在浮动，因此其他所有内容都不知道它的存在。 因此，您需要将页面的其余部分稍微向下推以进行补偿。

只需在主体内容上放一个顶部即可将其降低。

margin-top: 60px; 

总的来说，我将其添加到CSS中：

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

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

像这样工作： http : //www.bootply.com/QlRuLAUtwN