twitter bootstrap navbar固定顶部重叠站点

Question

我正在使用我的网站上的引导和有问题的navbar固定顶部。当我只是使用常规的navbar时，一切都很好。然而，当我尝试将它切换到navbar固定顶部时，站点上的所有其他内容就像navbar不存在一样向上移动，并且navbar与它重叠。下面是我的基本布局：

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

我试图完全复制引导示例，但仍然有这个问题，只有当使用navbar固定顶部。我做错了什么？

Answer 1

一个更方便的解决方案供您参考，它在我的所有项目中都运行得很好：

将您的第一行更改自

.navbar.navbar-fixed-top

至

.navbar.navbar-default.navbar-static-top

Answer 2

正如其他人所说的那样，在身体上加一个衬垫效果很好。但是当你把屏幕变窄（和手机一样宽）时，navbar和机身之间就会有一个间隙。此外，拥挤的navbar可以换行为多行条，再次覆盖部分内容。

这为我解决了这类问题

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

缺省情况下会产生40px的填充，当宽度小于768px时会产生0px的填充（根据bootstrap的文档，该宽度是创建间隙的手机布局截断）

Answer 3

你的答案在文档中是正确的：

固定的navbar将覆盖其他内容，除非您在的顶部添加padding。尝试您自己的值或使用下面的片段。提示：默认情况下，navbar为50px高。

body { padding-top: 70px; }

确保在核心引导CSS之后包含这些内容。

在引导程序中有4个文件...

Fixed navbars使用position：Fixed,这意味着它们是从DOM的正常流中提取的,并且可能需要自定义CSS（例如,padding-top）以防止与其他元素重叠。