<header>标签只有在＆lt;时才会将内容降低60px 980px？</报头>

Question

当我将浏览器窗口大小减小到宽度小于980px时，内容会减少60px

似乎正在发生的事情是<header>

下navbar标记被删除（我甚至不知道该标记在那里做了什么）

我将面包屑设置为显示样式：无，但包括或排除它们似乎没有什么区别。

不确定如何在不同的屏幕尺寸上保持一致

示例：http://www.wordisnear.org/

PS - 我正在使用名为Pynuke的web2py CMS，它可能正在使用自己特定的引导程序布局，但没有S.O. Pynuke（尚）的标签。

Answer 1

使用媒体查询，例如实施例

@media all and (max-width: 980px) and (min-width: 980px) {
body{
   margin-top:60px;
}
}

Answer 2

当视口宽度超过980像素时，导航栏有position: fixed（通过.navbar-fixed-top类） - 当您向下滚动时，注意到导航栏仍保持在屏幕顶部的位置。在这种情况下，<header>元素的60px上边距实际上与导航栏重叠，因此标题在主内容部分中不占用空间。请注意，即使您没有使用标题，其顶部边距实际上也是必需的 - 否则，您的内容会被提升并被导航条遮挡（当然，您可以摆脱标题而不是顶部您的内容容器上的保证金。）

当屏幕尺寸下降时，会有一个媒体查询将导航栏更改为position: static（可能是因为在滚动期间导航栏不会保留在屏幕上，因为在较小的屏幕上空间非常宝贵）。在这种情况下，<header>元素的60px上边距不再与导航栏重叠，而是占用主要内容顶部的空间。

如果你没有使用标题或面包屑，也许只是摆脱它们。然后，向主内容div添加60px上边距，并设置媒体查询以在宽度低于980px时移除上边距（因此当导航栏从固定切换到静态时，边距将消失）。