我在我的网站上使用bootstrap，我有导航栏固定顶部的问题。当我只是使用常规导航栏时，一切都很好。然而，当我尝试将它切换到导航栏固定顶部时，网站上的所有其他内容都向上移动，就像导航栏不存在一样，导航栏重叠了它。以下是我的基本思路:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
我试图复制bootstrap的例子，但仍然有这个问题，只有当使用导航栏固定顶部。我做错了什么?
当前回答
进一步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正文之前，它将不会生效。
其他回答
这个问题是已知的，在twitter引导站点中有一个解决方案:
当你添加导航栏时，记住要考虑隐藏区域 在下面。为<body>添加40px或更多的填充。一定要加上 它在核心引导CSS之后，在可选的响应之前 CSS。
这招对我很管用:
body { padding-top: 40px; }
Bootstrap 4的解决方案，它在我所有的项目中都很完美:
改变你的第一行
navbar-fixed-top
to
sticky-top
引导文档参考
他们是时候做对了:D
要处理菜单栏中的换行，在导航栏上应用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正文之前，它将不会生效。
之前所有的解决方案都以这样或那样的方式将40像素专门硬编码到html或CSS中。如果导航栏包含不同的字体大小或图像怎么办?如果我有一个很好的理由不把身体衬垫放在第一位呢?我一直在寻找这个问题的解决方案，以下是我想到的:
$(document).ready(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
$(window).resize(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});
你可以通过调整“1”来上下移动它。它似乎为我工作，无论大小的内容在导航栏，前后调整大小。
我很好奇其他人是怎么想的:请分享你的想法。(顺便说一下，它将被重构，不再重复。)除了使用jQuery，还有其他不使用这种方法的原因吗?我甚至让它与二级导航条一起工作，就像这样:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS:上面是Bootstrap 2.3.2 -它将在3工作。只要泛型类名保持不变…事实上，它应该独立于bootstrap工作，对吧?
编辑:这是一个完整的jquery函数，处理两个堆叠，响应固定导航条的动态大小。它需要3个html类(或者可以使用id): user-top, admin-top和contentwrap:
$(document).ready(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
$(window).resize(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
});
