推特引导导航栏固定顶部重叠的网站

我在我的网站上使用bootstrap，我有导航栏固定顶部的问题。当我只是使用常规导航栏时，一切都很好。然而，当我尝试将它切换到导航栏固定顶部时，网站上的所有其他内容都向上移动，就像导航栏不存在一样，导航栏重叠了它。以下是我的基本思路:

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

我试图复制bootstrap的例子，但仍然有这个问题，只有当使用导航栏固定顶部。我做错了什么?

339341 次浏览
小开
最佳答案

你的答案在文档中是正确的:

需要填充身体

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

body { padding-top: 70px; }

确保包含这个后的核心引导CSS。

和引导文档…

固定导航条使用位置:固定，意味着它们从 DOM的正常流程，可能需要自定义CSS(例如，填充顶部

.在the上)以防止与其他元素重叠
小开

这个问题是已知的，在twitter引导站点中有一个解决方案:

当你添加导航栏时，记住要考虑隐藏区域 在下面。为<body>添加40px或更多的填充。一定要加上 它在核心引导CSS之后，在可选的响应之前 CSS。< / p >

这招对我很管用:

body { padding-top: 40px; }
小开
正如其他人所说，在身体上加一个衬垫非常有用。 但是当你把屏幕调窄(和手机宽度一样)时，导航栏和机身之间就会有一个间隙。此外，一个拥挤的导航条可以被包装成一个多行栏，再次覆盖一些内容

这为我解决了这些问题

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

这使得一个40px的默认填充和0px的宽度低于768px(根据bootstrap的文档是手机布局的分割，在那里将产生的差距)

小开

我把这个放在屈服容器之前:

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

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

编辑-这工作得更好:

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

之前所有的解决方案都以这样或那样的方式将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工作。只要泛型类名保持不变…事实上，它应该独立于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'
});
});
小开

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

要处理菜单栏中的换行，在导航栏上应用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>

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

小开

我只是包装了导航栏在一个

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

没有什么花哨的把戏，但它奏效了。

小开

进一步Nick Bisby的回答，如果你在rails中使用HAML遇到这个问题，并且你应用了Roberto Barros的修复:

我替换了&;bootstrap_and_override .css&;:

=需要twitter-bootstrap-static / bootstrap.css.erb

(见https://github.com/seyhunak/twitter-bootstrap-rails/issues/91)

．.． 你需要把body CSS 之前的require语句如下:

@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb

如果require语句在CSS正文之前，它将不会生效。

小开

你所要做的就是

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

为Bootstrap 3。+，我会使用以下CSS来修复导航栏-固定顶部和锚跳重叠的问题 https://github.com/twbs/bootstrap/issues/1768 < / p > 

/* 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;
}
小开

问题在于navbar-fixed-top，它将覆盖你的内容，除非指定主体填充。这里提供的解决方案不能在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>
小开

我会这样做:

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

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

小开

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

改变你的第一行

.navbar.navbar-fixed-top

来

.navbar.navbar-default.navbar-static-top
小开

正如我在一个类似的问题中所张贴的，我已经成功地创建了一个虚拟的非固定导航栏，就在我真正的固定导航栏之前。

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

这种间距在所有屏幕尺寸上都很适用。

小开

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

改变你的第一行

navbar-fixed-top

来

sticky-top

Bootstrap文档参考 .

他们是时候做对了:D

小开

在nav标签中使用这个类

class="navbar - navbar-expand-lg navbar-light bg-light sticky-top"

自举4

小开
只要用sticky-top改变fixed-top。这样你就不必计算填充了。
而且很管用!!< / p >
小开

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

<body class="pt-5 mt-4">....</body>

提交答案