我在我的网站上使用bootstrap，我有导航栏固定顶部的问题。当我只是使用常规导航栏时，一切都很好。然而，当我尝试将它切换到导航栏固定顶部时，网站上的所有其他内容都向上移动，就像导航栏不存在一样，导航栏重叠了它。以下是我的基本思路:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
我试图复制bootstrap的例子，但仍然有这个问题，只有当使用导航栏固定顶部。我做错了什么?
当前回答
@Ryan，你是对的，硬编码高度会让它在自定义导航栏的情况下工作得很糟糕。这是我为BS 3.0.0愉快地使用的代码:
$(window).resize(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
$(window).load(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
其他回答
我把这个放在屈服容器之前:
<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;"> </div>
我喜欢这种方法，因为它记录了需要让它工作的黑客，而且它也适用于移动导航。
编辑-这工作得更好:
@media (min-width: 980px) {
body {
padding-top: 60px;
padding-bottom: 42px;
}
}
问题在于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>
要处理菜单栏中的换行，在导航栏上应用id，如下所示:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">
并在包含jquery后在头部添加这个小脚本，像这样:
<script>
$(document).ready(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
$(window).resize(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
});
});
</script>
这样，主体的顶部填充就会自动调整。
只要把固定顶换成粘顶就行了。这样你就不必计算填充了。 而且很管用!!
进一步Nick Bisby的回答，如果你在rails中使用HAML遇到这个问题，并且你应用了Roberto Barros的修复:
我将“bootstrap_and_override .css”中的require替换为: =需要twitter-bootstrap-static / bootstrap.css.erb
(参见https://github.com/seyhunak/twitter-bootstrap-rails/issues/91)
．.． 你需要把CSS正文放在require语句之前，如下所示:
@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb
如果require语句在CSS正文之前，它将不会生效。
