Question

我在我的网站上使用bootstrap，并且导航栏固定有问题。当我只使用常规导航栏时，一切都很好。但是，当我尝试将其切换到导航栏固定顶部时，网站上的所有其他内容都会向上移动，就像导航栏不在那里而导航栏重叠一样。这基本上就是我如何摆脱它：

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

我试图准确复制bootstraps示例但仅在使用navbar固定顶部时仍然存在此问题。我做错了什么？

Answer 1

你的回答是docs：

需要身体填充

除非您将padding添加到<body>的顶部，否则固定的导航栏会覆盖您的其他内容。尝试自己的价值观或使用下面的代码段。提示：默认情况下，导航栏高50像素。
body { padding-top: 70px; }
确保在核心Bootstrap CSS之后包含。

并在 Bootstrap 4 docs

中

固定的导航栏使用位置：固定，意味着它们被拉出 DOM的正常流程并且可能需要自定义CSS（例如，填充顶部在...上，以防止与其他元素重叠。

Answer 2

正如其他人所说，在身体上添加填充物效果很好。但是当你使屏幕更窄（手机宽度）时，导航栏和机身之间存在间隙。此外，拥挤的导航栏可以换行到多行条，再次覆盖部分内容。

这为我解决了这些问题

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

默认情况下为40px填充，宽度为768px时为0px（根据bootstrap的文档是手机布局截止，将创建间隙）

Answer 3

一个更方便的解决方案供您参考，它在我的所有项目中都很完美：

从

更改您的第一行

.navbar.navbar-fixed-top

到

.navbar.navbar-default.navbar-static-top

Answer 4

这个问题是众所周知的，twitter bootstrap网站有一个解决方法：

当您粘贴导航栏时，请记住要考虑隐藏区域下。将{40}或更多填充添加到<body>。一定要添加这是在核心Bootstrap CSS和可选响应之前 CSS。

这对我有用：

body { padding-top: 40px; }

Answer 5

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

Answer 6

我把它放在yield容器之前：

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

我喜欢这种方法，因为它记录了使其工作所需的黑客，而且它也适用于移动导航。

编辑 - 这样做效果更好：

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}

Answer 7

问题在于navbar-fixed-top，它将覆盖您的内容，除非指定body-padding。此处未提供解决方案适用于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>

Answer 8

正如我在类似的问题中发布的那样，我在真正的固定导航栏之前创建了一个虚拟的非固定导航栏，取得了很好的成功。

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

在所有屏幕尺寸上间距都很好。

Answer 9

所有以前的解决方案都以一种方式或另一种方式将40像素硬编码到html或CSS中。如果导航栏包含不同的字体大小或图像，该怎么办？如果我有充分的理由不首先搞乱 body 填充怎么办？我一直在寻找这个问题的解决方案，这就是我想出来的：

$(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.x中工作只要通用类名仍然存在......实际上它应该独立于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'
        });
});

Answer 10

要处理菜单栏中的包装线，请将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>

这样，身体的顶部填充会自动调整。

Answer 11

Bootstrap 4的解决方案，在我的所有项目中均能完美运行：

更改第一行为

navbar-fixed-top

到

sticky-top

Bootstrap documentation reference

大约是他们做对的时间：D

Answer 12

只需将fixed-top更改为sticky-top。这样，您就不必计算填充。
而且有效！！

Answer 13

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

Answer 14

你所要做的就是

@media (min-width: 980px) { body { padding-top: 40px; } }

Answer 15

我会这样做：

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

这应该确保导航区块不会向下延伸并覆盖页面内容。

Answer 16

继Nick Bisby的回答之后，如果你在轨道中使用HAML就会遇到这个问题而你已经应用了Roberto Barros＆＃39;修复此处：

我替换了＆＃34; bootstrap_and_overrides.css＆＃34;中的require。到：

= 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语句在body CSS之前，它将不会生效。

Answer 17

在导航标签中使用此类

class =“ navbar navbar-expand-lg navbar-light bg-light 粘性顶部”

对于引导程序4

Answer 18

我刚把导航栏包裹在

中

<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>

没有花哨的焦点，但它有效..

twitter bootstrap navbar固定顶部重叠站点

18 个答案:

需要身体填充