叽叽喳喳bootstrap navbar固定顶部重叠网站
我在我的网站上使用引导程序，并与导航栏固定顶部的问题。 当我只使用常规导航栏时，一切都很好。 但是，当我尝试将其切换到导航栏固定顶部，该网站上的所有其他内容像导航栏不在那里和导航栏重叠了。 基本上我是这么解释的：
.navbar.navbar-fixed-top .navbar-inner .container .container .row //yield content 我试图完全复制引导示例，但只有在使用导航栏固定顶部时才会出现此问题。 我究竟做错了什么？
您的答案在文档中是正确的：
需要填充身体
固定的导航栏将覆盖您的其他内容，除非您将
padding添加到<body>的顶部。 尝试自己的价值观或使用下面的代码段。 提示：默认情况下，导航栏高度为50像素。body { padding-top: 70px; }确保在核心引导CSS 之后包含这个。
正如其他人所说，增加一个填充顶部的身体很好。 但是，当你缩小屏幕（对手机宽度）时，导航栏和机身之间会有一个间隙。 另外，拥挤的导航栏可以换行到多行栏，重新覆盖一些内容。
这为我解决了这些问题
body { padding-top: 40px; } @media screen and (max-width: 768px) { body { padding-top: 0px; } }
这使默认情况下为40px填充，在768px宽度下为0px（根据bootstrap的文档是手机布局截止位置将创build间隙）
这个问题是已知的，并且在twitter引导程序站点中有一个解决方法：
当您粘贴导航栏时，请记住考虑下面的隐藏区域。 添加40px或更多的填充到
<body>。 一定要在核心Bootstrap CSS之后和可选的响应CSS之前添加。
这对我工作：
body { padding-top: 40px; }
@Ryan，你是对的，硬编码的高度将使它在自定义的navbars的情况下工作不好。 这是我正在使用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>
我喜欢这种方法，因为它logging了需要的破解，再加上它也适用于移动导航。
编辑 – 这工作好多了：
@media (min-width: 980px) { body { padding-top: 60px; padding-bottom: 42px; } }
一个更方便的解决scheme供您参考，它适用于我所有的项目：
改变你的第一行
.navbar.navbar-fixed-top
至
.navbar.navbar-default.navbar-static-top
所有以前的解决scheme都以一种或另一种方式将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”来上下移动它。 它似乎为我工作，无论在resize之前和之后的导航栏中的内容的大小。
我很好奇别人怎么看这个：请分享你的想法。 （这将被重构为不重复，顺便说一句）除了使用jQuery，还有其他的理由不以这种方式来解决问题？ 我甚至可以用这样的辅助导航栏来工作：
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + $('.admin-nav').height() + 1 )+'px'});
PS：以上是在引导2.3.2 – 它会工作在3.x只要generics类名保持…实际上，它应该工作独立于引导，对不对？
编辑：这是一个完整的jquery函数，处理dynamic大小的两个堆积，响应固定的导航栏。 它需要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' }); });
问题在于navbar-fixed-top，它会覆盖你的内容，除非指定了body-padding。 这里没有提供解决scheme在100％的情况下工作。 JQuery解决scheme在页面加载后闪烁/移动页面，看起来很奇怪。
对我来说真正的解决scheme不是使用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>
就像我在类似的问题中发布的那样，在我真正的固定导航栏之前创build一个虚拟的非固定导航栏已经取得了很好的成功。
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar --> <nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar --> <!-- Nav bar details --> </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>
这样，身体的顶部填充会自动调整。
Bootstrap 3. +，我会使用下面的CSS来修复navbar-fixed-top和基于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; }
所有你需要做的是
@media (min-width: 980px) { body { padding-top: 40px; } }
进一步尼克Bisby的答案，如果你在轨道中使用HAML这个问题，你已经在这里应用罗伯托·巴罗斯的修复：
我将“bootstrap_and_overrides.css”中的requirereplace为：
=需要twitter-bootstrap-static / bootstrap.css.erb
（请参阅https://github.com/seyhunak/twitter-bootstrap-rails/issues/91 ）
…您需要在require语句之前放置body CSS，如下所示：
@import "twitter/bootstrap/bootstrap"; body { padding-top: 40px; } @import "twitter/bootstrap/responsive"; =require twitter-bootstrap-static/bootstrap.css.erb
如果require语句放在body CSS之前，它将不会生效。
我会这样做：
// add appropriate media query if required to target mobile nav only .nav { overflow-y: hidden !important }
这应该确保导航块不会拉伸downpage并覆盖页面内容。
我只是将导航栏包裹在一个
<div width="100%"> <div class="nav-? ??"> ... </nav> </div>
没有花哨的焦点，但它的工作..
