导航栏固定顶部将内容向上翻页 [英] Navbar-fixed-top pushes content on page up

问题描述

我目前在页面顶部有一个导航栏，它是静态的，但是当我尝试对其进行修复时，它总是吃掉"它下面的内容.

I currently have a navbar at the top of my page that is static, but when I try to make it fixed, it always "eats" the content below it.

在静态时启动
修复后启动，

有什么办法可以解决这个问题?

Is there any way to fix this?

推荐答案

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

When you add the navbar-fixed-top class to your nav bar, it applies two main CSS properties:

position: fixed;
top: 0;

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

This fixes the div to the top of the page. Doing that however means the following div starts exactly where the nav bar previously was. Think like this, the nav bar is now floating around so everything else is unaware of it's existence. So you need to push the rest of your page down slightly to compensate.

只需在主体内容上放一个边缘顶部以将其按下即可.

Just put a margin-top on the body content to push it down.

margin-top: 60px; 

我已将其全部添加到CSS:

In full, I added this to the CSS:

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

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

Then added the body-content class to the next container.

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

这篇关于导航栏固定顶部将内容向上翻页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！