我在我的网站上使用bootstrap，我有导航栏固定顶部的问题。当我只是使用常规导航栏时，一切都很好。然而，当我尝试将它切换到导航栏固定顶部时，网站上的所有其他内容都向上移动，就像导航栏不存在一样，导航栏重叠了它。以下是我的基本思路:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
我试图复制bootstrap的例子，但仍然有这个问题，只有当使用导航栏固定顶部。我做错了什么?
当前回答
正如我在一个类似的问题中所张贴的，我已经成功地创建了一个虚拟的非固定导航栏，就在我真正的固定导航栏之前。
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
这种间距在所有屏幕尺寸上都很适用。
其他回答
正如我在一个类似的问题中所张贴的，我已经成功地创建了一个虚拟的非固定导航栏，就在我真正的固定导航栏之前。
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
这种间距在所有屏幕尺寸上都很适用。
我把这个放在屈服容器之前:
<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;"> </div>
我喜欢这种方法，因为它记录了需要让它工作的黑客，而且它也适用于移动导航。
编辑-这工作得更好:
@media (min-width: 980px) {
body {
padding-top: 60px;
padding-bottom: 42px;
}
}
这对我来说很有效，看起来也不错。
<body class="pt-5 mt-4">....</body>
只要把固定顶换成粘顶就行了。这样你就不必计算填充了。 而且很管用!!
我会这样做:
// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }
这将确保导航块不会向下延伸并覆盖页面内容。
