twitter bootstrap导航栏固定顶部重叠站点

本文翻译自：twitter bootstrap navbar fixed top overlapping site

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. 我试图完全复制引导程序示例，但仅在使用navbar fixed top时仍然存在此问题。 what am I doing wrong? 我究竟做错了什么？

---

#1楼

参考：https://stackoom.com/question/kg3t/twitter-bootstrap导航栏固定顶部重叠站点

---

#2楼

Your answer is right in the docs : 您的答案是正确的docs ：

Body padding required 需要身体填充

The fixed navbar will overlay your other content, unless you add padding to the top of the . 除非您在的顶部添加padding ，否则固定的导航栏将覆盖您的其他内容。 Try out your own values or use our snippet below. 试用您自己的值或使用下面的代码段。 Tip: By default, the navbar is 50px high. 提示：默认情况下，导航栏的高度为50px。

 body { padding-top: 70px; } 

Make sure to include this after the core Bootstrap CSS. 确保在核心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 (eg, padding-top on the ) to prevent overlap with other elements. 固定的导航栏使用位置：固定，这意味着它们是从DOM的正常流程中拉出的，并且可能需要自定义CSS（例如上的padding-top）以防止与其他元素重叠。

---

#3楼

This issue is known and there's a workaround in the twitter bootstrap site: 这个问题是已知的，并且在twitter引导站点中有一种解决方法：

When you affix the navbar, remember to account for the hidden area underneath. 当您粘贴导航栏时，请记住考虑下面的隐藏区域。 Add 40px or more of padding to the . 向添加40px或更多的填充。 Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS. 确保将其添加到核心Bootstrap CSS之后和可选的响应CSS之前。

This worked for me: 这为我工作：

body { padding-top: 40px; }

---

#4楼

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. 同样，拥挤的导航栏可以包装到多行栏，再次覆盖某些内容。

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) 默认情况下，这会产生40px的填充，当宽度小于768px时会填充0px（根据bootstrap的文档，这是将在其中创建间隙的手机布局截止点）

---

#5楼

I put this before the yield container: 我把它放在yield容器之前：

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;
  }
}

---

#6楼

All the previous solutions hard-code 40 pixels specifically into the html or CSS in one fashion or another. 以前的所有解决方案都以一种或另一种方式将40像素专门编码为html或CSS。 What if the navbar contains a different font-size or an image? 如果导航栏包含其他字体大小或图像，该怎么办？ What if I have a good reason not to mess with the body padding in the first place? 如果我有充分的理由首先不弄乱身体填充怎么办？ I have been searching for a solution to this problem, and here is what I came up with: 我一直在寻找解决此问题的方法，这是我想到的：

$(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'. 您可以通过调整“ 1”上下移动它。 It seems to work for me regardless of the size of the content in the navbar, before and after resizing. 大小调整前后，无论导航栏中内容的大小如何，它似乎都对我有用。

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? （顺便说一句，它将被重构为不再重复）。除了使用jQuery，还有其他原因不能以这种方式解决问题吗？ I've even got it working with a secondary navbar like this: 我什至可以使用这样的辅助导航栏：

$('.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. 编辑：这是一个完整的jquery函数，可以处理两个堆叠的动态大小的响应式固定导航栏。 It requires 3 html classes(or could use id's): user-top, admin-top, and contentwrap: 它需要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'
        });
});