372

我在我的网站上使用引导程序，并且导航栏固定顶部有问题。当我只使用常规导航栏时，一切都很好。但是，当我尝试将其切换到导航栏固定顶部时，网站上的所有其他内容都会向上移动，就像导航栏不存在并且导航栏与其重叠一样。这基本上是我的布局：

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

我试图完全复制引导程序示例，但仅在使用导航栏固定顶部时仍然存在此问题。我究竟做错了什么？

4

19 回答 19

563

您的答案在文档中是正确的：

需要身体填充物

固定导航栏将覆盖您的其他内容，除非您添加padding到<body>. 尝试您自己的价值观或使用我们下面的代码段。提示：默认情况下，导航栏的高度为 50px。

body { padding-top: 70px; }

确保在核心 Bootstrap CSS之后包含它。

在Bootstrap 4 文档中...

固定导航栏使用位置：固定，这意味着它们是从 DOM 的正常流程中拉出来的，并且可能需要自定义 CSS（例如，在 上的 padding-top ）以防止与其他元素重叠。

于 2012-06-20T17:19:46.893 回答
131

正如其他人所说，在 body 上添加一个 padding-top 效果很好。但是，当您使屏幕变窄（到手机宽度）时，导航栏和主体之间会出现间隙。此外，拥挤的导航栏可以换成多行栏，再次覆盖一些内容。

这为我解决了这些问题

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

这在默认情况下会产生 40px 的填充，当宽度低于 768px 时会产生 0px（根据引导程序的文档，这是将创建间隙的手机布局截止点）

于 2012-10-24T14:56:58.170 回答
37

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

改变你的第一行

.navbar.navbar-fixed-top

到

.navbar.navbar-default.navbar-static-top
于 2015-06-18T22:04:10.367 回答
32

只需更改fixed-top. sticky-top这样您就不必计算填充。
它有效！

于 2019-08-07T14:50:05.653 回答
29

@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);         
});
于 2013-10-17T06:50:54.507 回答
28

这个问题是已知的，并且在 twitter 引导站点中有一个解决方法：

粘贴导航栏时，请记住考虑下方的隐藏区域。添加 40px 或更多的填充到<body>. 请务必在核心 Bootstrap CSS 之后和可选的响应式 CSS 之前添加它。

这对我有用：

body { padding-top: 40px; }
于 2012-06-20T17:22:29.567 回答
28

Bootstrap 4 的解决方案，它在我的所有项目中都很完美：

改变你的第一行

navbar-fixed-top

到

sticky-top

引导文档参考

大约是时候他们做对了：D

于 2018-07-20T13:25:00.920 回答
22

我把它放在产量容器之前：

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

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

编辑 - 这工作得更好：

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}
于 2012-12-22T16:09:09.353 回答
18

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

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

间距适用于所有屏幕尺寸。

于 2016-03-16T01:44:49.610 回答
16

问题在于 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>
于 2015-01-10T22:48:26.933 回答
14

所有以前的解决方案都以一种或另一种方式将 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.x 中工作，只要通用类名仍然存在......事实上，它应该独立于引导程序工作，对吗？

编辑：这是一个完整的 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'
        });
});
于 2013-08-05T07:47:41.980 回答
11

要处理菜单栏中的换行，请将 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>

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

于 2013-11-25T16:00:12.903 回答
6

在导航标签中使用这个类

class="navbar navbar-expand-lg navbar-light bg-light置顶"

对于引导程序 4

于 2019-01-30T19:30:51.837 回答
4

对于 Bootstrap 3.+ ，我将使用以下 CSS 来修复基于 https://github.com/twbs/bootstrap/issues/1768的 navbar-fixed-top 和锚点跳转重叠问题

/* 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; 
}
于 2014-12-06T08:42:56.483 回答
1

你所要做的就是

@media (min-width: 980px) { body { padding-top: 40px; } }
于 2014-08-13T02:13:23.000 回答
0

继 Nick Bisby 的回答之后，如果您在 Rails 中使用 HAML 遇到此问题，并且您已在此处应用了 Roberto Barros 的修复程序：

我将“bootstrap_and_overrides.css”中的要求替换为：

=需要 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 之前，它不会生效。

于 2014-06-23T16:54:17.963 回答
0

我会这样做：

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

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

于 2015-04-30T18:29:12.227 回答
0

这很有效，对我来说看起来不错。

<body class="pt-5 mt-4">....</body>
于 2021-11-27T13:56:14.410 回答
-4

我只是将导航栏包裹在

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

没有花哨的恶作剧，但它奏效了..

于 2014-03-05T01:19:41.720 回答