我在我的网站上使用bootstrap，我有导航栏固定顶部的问题。当我只是使用常规导航栏时，一切都很好。然而，当我尝试将它切换到导航栏固定顶部时，网站上的所有其他内容都向上移动，就像导航栏不存在一样，导航栏重叠了它。以下是我的基本思路:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
我试图复制bootstrap的例子，但仍然有这个问题，只有当使用导航栏固定顶部。我做错了什么?
当前回答
Bootstrap 4的解决方案，它在我所有的项目中都很完美:
改变你的第一行
navbar-fixed-top
to
sticky-top
引导文档参考
他们是时候做对了:D
其他回答
问题在于navbar-fixed-top，它将覆盖你的内容，除非指定主体填充。这里提供的解决方案不能在100%的情况下工作。JQuery解决方案在页面加载后闪烁/移动页面，这看起来很奇怪。
对我来说，真正的解决方案不是使用navbar-fixed-top，而是使用navbar-static-top。
.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron
<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
你所要做的就是
@media (min-width: 980px) { body { padding-top: 40px; } }
正如其他人所说，在身体上加一个衬垫非常有用。 但是当你把屏幕调窄(和手机宽度一样)时，导航栏和机身之间就会有一个间隙。此外，拥挤的导航栏可以被包装成多行栏，再次覆盖一些内容。
这为我解决了这些问题
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
这使得一个40px的默认填充和0px的宽度低于768px(根据bootstrap的文档是手机布局的分割，在那里将产生的差距)
Bootstrap 3。+，我会使用以下CSS来修复导航栏-固定顶部和锚跳重叠的问题 https://github.com/twbs/bootstrap/issues/1768
/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 40px; }
}
/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
这对我来说很有效，看起来也不错。
<body class="pt-5 mt-4">....</body>
