Twitter bootstrap 如何强制引导导航栏固定到下的顶部下推（滑动）元素

正如您在Bootstrap 3中所看到的，固定在顶部的导航栏在小屏幕中的导航栏后面的向下滑动元素上的行为与常规导航栏不同。相反，它将导航栏覆盖在内容元素之上。现在，你能告诉我是否有一种方法可以强制修复导航栏，它也可以像普通导航栏一样在滑动时上下推内容吗

---

谢谢

好吧，你可以让它做你想做的事，但请允许我告诉你为什么这么做真的是个坏主意，因为最后它毫无意义。

以下答案将使用下面的代码段进行参考。您可能需要全屏查看，这意味着您可能还需要调整浏览器窗口的宽度，以显示收拢的导航

$（函数（）{
$（'button.navbar toggle'）。单击（函数（）{
var值=$（'body'）.css（'padding-top'）；
如果（值=='70px'）{
$（'body'）.css（'padding-top'，'+=235'）；
}否则{
$（'body'）.css（'padding-top'，'70'）；
}
});
});
正文{
填充顶部：70px；
}

切换导航







































无标题的小组标题
面板内容
小组标题
面板内容
无标题的小组标题
面板内容
小组标题
面板内容
无标题的小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
在移动设备上下推内容的关键是将“导航栏静态顶部”添加到。导航栏：

if(screen.width >= 768) {
    $('.navbar').addClass('navbar-fixed-top');
    $('body').css("padding-top", 128);
} else {
    $('.navbar').removeClass('navbar-fixed-top navbar-fixed').addClass("navbar-static-top");
    $('body').css({"padding-top": 0, "margin-top": 144});
}

固定版本并不是真的打算这样工作。通过使其固定，它有点像“悬停”在主体内容上，因此，折叠的导航将在展开时悬停在主体内容上。试图让它以其他方式工作很可能需要一些定制的JS/JQ来完成，但这与固定导航栏的想法背道而驰。如果你需要静态版本，当导航在较小的屏幕上展开时，我建议你使用静态版本来向下推送内容。此外，如果你坚持使用固定版本，你需要添加
padding top:70px
到body元素的CSS样式。同意@MattD我没有想到这个想法是要有一个固定的导航栏并推送内容，唯一的方法是使用Jquery高度计算。@PatrickLC我继续写了一个可行的解决方案，但也解释了为什么一开始就实现这样一个功能不是一个好主意，主要是因为它完全没有意义。@MattD回答得很好！谢谢你的解答和解释。为什么把内容往下推毫无意义？用户不需要知道他们必须再次点击菜单栏才能显示所有内容吗？我见过很多推送内容的网站，我认为这是标准的。@rontornambe他们要求一个固定的导航栏，这意味着当用户向下滚动页面时，他们打算让内容进入导航栏。当使用Bootstrap的固定导航栏时，它通常只覆盖页面上的内容，直到用户再次折叠它。想要将内容向下推实际上违反了这一惯例，当页面向下走到一半时，会带来视觉上的烦恼，因为内容会有轻微的、无意义的跳跃。滚动我的示例中的内容，看看我在说什么，并将其与固定和非固定引导导航栏的默认功能进行比较。感谢@MattD的解释。我确实找到了一种不受撞击地向下推送内容的方法，但我仍然认为这会让用户感到困惑。