twitter bootstrap 导航栏固定顶部重叠站点 | 导航栏固定顶部重叠站点

本文介绍了twitter bootstrap 导航栏固定顶部重叠站点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在我的网站上使用引导程序，但导航栏固定顶部有问题.当我只使用常规导航栏时，一切都很好.但是，当我尝试将其切换到固定顶部导航栏时，网站上的所有其他内容都会向上移动，就像导航栏不存在并且导航栏重叠一样.这基本上是我的布局方式:

I am using bootstrap on my site and am having issues with the navbar fixed top. When I am just using the regular navbar, everything is fine. However, when i try to switch it to navbar fixed top, all the other content on the site shifts up like the navbar isn't there and the navbar overlaps it. here's basically how i laid it out:

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

我试图完全复制引导程序示例，但仅在使用导航栏固定顶部时仍然存在此问题.我做错了什么?

i tried to copy bootstraps examples exactly but still having this issue only when using navbar fixed top. what am I doing wrong?

推荐答案

你的答案在文档:

固定导航栏将覆盖您的其他内容，除非您将 padding 添加到的顶部.尝试您自己的价值观或使用我们下面的代码片段.提示:默认情况下，导航栏的高度为 50 像素.

body { padding-top: 70px; }

确保在核心 Bootstrap CSS 之后包含此内容.

Make sure to include this after the core Bootstrap CSS.

在Bootstrap 4 文档中...

固定导航栏使用位置:固定，这意味着它们是从DOM 的正常流程，可能需要自定义 CSS(例如，padding-top在 ) 上以防止与其他元素重叠.

这篇关于twitter bootstrap 导航栏固定顶部重叠站点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！