Html twitter bootstrap 导航栏固定顶部重叠站点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11124777/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap navbar fixed top overlapping site
提问by Matthew Berman
I am using bootstrap on my site and am having issues with the navbar fixed top. When I am just using the regular navbar, everything is fine. However, when i try to switch it to navbar fixed top, all the other content on the site shifts up like the navbar isn't there and the navbar overlaps it. here's basically how i laid it out:
我在我的网站上使用引导程序，并且导航栏固定顶部有问题。当我只使用常规导航栏时，一切都很好。但是，当我尝试将其切换到固定顶部导航栏时，网站上的所有其他内容都会向上移动，就像导航栏不存在并且导航栏重叠一样。这基本上是我的布局方式：
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
i tried to copy bootstraps examples exactly but still having this issue only when using navbar fixed top. what am I doing wrong?
我试图完全复制引导程序示例，但仅在使用导航栏固定顶部时仍然存在此问题。我究竟做错了什么？
回答by rfunduk
Your answer is right in the docs:
您的答案在文档中是正确的：
Body padding required
The fixed navbar will overlay your other content, unless you add
paddingto the top of the<body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.body { padding-top: 70px; }Make sure to include this afterthe core Bootstrap CSS.
需要身体填充
固定导航栏将覆盖您的其他内容，除非您添加
padding到<body>. 尝试您自己的价值观或使用我们下面的代码片段。提示：默认情况下，导航栏高 50 像素。body { padding-top: 70px; }确保在核心 Bootstrap CSS之后包含它。
and in the Bootstrap 4 docs...
并在Bootstrap 4 文档中...
Fixed navbars use position: fixed, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the ) to prevent overlap with other elements.
固定导航栏使用 position: fixed ，这意味着它们是从 DOM 的正常流中拉出来的，并且可能需要自定义 CSS（例如， 上的 padding-top ）以防止与其他元素重叠。
回答by Nick Bisby
As others have stated adding a padding-top to body works great. But when you make the screen narrower (to cell phone widths) there is a gap between the navbar and the body. Also, a crowded navbar can wrap to a multi-line bar, overwriting some of the content again.
正如其他人所说，在 body 上添加一个 padding-top 效果很好。但是当你把屏幕变窄（到手机宽度）时，导航栏和主体之间就会出现间隙。此外，拥挤的导航栏可以换行到多行栏，再次覆盖某些内容。
This solved these kinds of issues for me
这为我解决了这些问题
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
This makes a 40px padding by default and 0px when under 768px width (which according to bootstrap's docs is the cell phone layout cutoff where the gap would be created)
默认情况下，这会产生 40 像素的填充，宽度低于 768 像素时会产生 0 像素（根据引导程序的文档，这是将创建间隙的手机布局截止点）
回答by catsky
a much more handy solution for your reference, it works perfect in all of my projects:
一个更方便的解决方案供您参考，它在我的所有项目中都能完美运行：
change your first line from
改变你的第一行
.navbar.navbar-fixed-top
to
到
.navbar.navbar-default.navbar-static-top
回答by davidrac
This issue is known and there's a workaround in the twitter bootstrap site:
这个问题是已知的，在 twitter bootstrap 站点中有一个解决方法：
When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the
<body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
粘贴导航栏时，请记住考虑下方的隐藏区域。将 40px 或更多的填充添加到
<body>. 确保在核心 Bootstrap CSS 之后和可选的响应式 CSS 之前添加它。
This worked for me:
这对我有用：
body { padding-top: 40px; }
回答by Aram Paronikyan
@Ryan, you are right, hard-coding the height will make it work bad in case of custom navbars. This is the code I am using for BS 3.0.0 happily:
@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);
});
回答by Dan
I put this before the yield container:
我把它放在产量容器之前：
<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;"> </div>
I like this approach because it documents the hack needed to get it work, plus it also works for the mobile nav.
我喜欢这种方法，因为它记录了让它工作所需的 hack，而且它也适用于移动导航。
EDIT - this works much better:
编辑 - 这效果更好：
@media (min-width: 980px) {
body {
padding-top: 60px;
padding-bottom: 42px;
}
}
回答by Jason Butler
As I've posted in a similar question, I've had good success with creating a dummy non-fixed nav bar right before my real fixed nav bar.
正如我在一个类似的问题中发布的那样，我在我真正的固定导航栏之前创建了一个虚拟的非固定导航栏，并取得了很好的成功。
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
The spacing works out great on all screen sizes.
间距适用于所有屏幕尺寸。
回答by Tomas Kubes
The problem is with navbar-fixed-top, which will overlay your content unless specify body-padding. No solution provided here works in 100% cases. The JQuery solution blink/shift the page after the page is loaded, which looks weird.
问题在于导航栏固定顶部，除非指定正文填充，否则它将覆盖您的内容。此处提供的任何解决方案都无法在 100% 的情况下起作用。JQuery 解决方案在页面加载后闪烁/移动页面，看起来很奇怪。
The real solution for me is not to use navbar-fixed-top, but navbar-static-top.
对我来说真正的解决方案不是使用 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>
回答by Rick
The solution for Bootstrap 4, it works perfect in all of my projects:
Bootstrap 4 的解决方案，它在我的所有项目中都能完美运行：
change your first line from
改变你的第一行
navbar-fixed-top
to
到
sticky-top
Bootstrap documentation reference
About time they did this right :D
是时候他们做对了：D
回答by Ryan
All the previous solutions hard-code 40 pixels specifically into the html or CSS in one fashion or another. What if the navbar contains a different font-size or an image? What if I have a good reason not to mess with the bodypadding in the first place? I have been searching for a solution to this problem, and here is what I came up with:
以前的所有解决方案都以一种或另一种方式将 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'});
});
You can move it up or down by adjusting the '1'. It seems to work for me regardless of the size of the content in the navbar, before and after resizing.
您可以通过调整“1”来上下移动它。无论导航栏中内容的大小如何，在调整大小之前和之后，它似乎都对我有用。
I am curious what others think about this: please share your thoughts. (It will be refactored as not to repeat, btw.) Besides using jQuery, are there any other reasons not to approach the problem this way? I've even got it working with a secondary navbar like this:
我很好奇其他人对此有何看法：请分享您的想法。（它会被重构为不再重复，顺便说一句。）除了使用 jQuery，还有没有其他理由不以这种方式解决问题？我什至让它与这样的辅助导航栏一起工作：
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: Above is on Bootstrap 2.3.2 - will it work in 3.x As long as the generic class names remain... in fact, it should work independent of bootstrap, right?
PS：以上是在 Bootstrap 2.3.2 上 - 它可以在 3.x 中工作，只要通用类名仍然存在......事实上，它应该独立于引导程序，对吗？
EDIT: Here is a complete jquery function that handles two stacked, responsive fixed navbars of dynamic size. It requires 3 html classes(or could use id's): user-top, admin-top, and contentwrap:
编辑：这是一个完整的 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'
});
});
