如何强制 Bootstrap 导航栏固定到顶部 下推(滑动)元素 [英] How to Force Bootstrap Navbar Fix To Top Push Down(slide) Elements Under

问题描述

正如您在 此演示 中所见，Bootstrap 3 Navbar Fixed to Top 与常规导航栏不同向下滑动小屏幕中导航栏后面的元素.相反，它将导航栏覆盖在内容元素之上.现在你能告诉我是否有办法强制修复导航栏也像常规导航栏一样在滑动时上下推动内容吗?

谢谢

解决方案

好的，所以你可以让它做你想做的事，但让我告诉你为什么这样做真的是个坏主意，因为 最后它只是毫无意义.

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

$(function() {$('button.navbar-toggle').click(function() {var value = $('body').css('padding-top');如果(值 === '70px'){$('body').css('padding-top', '+=235');} 别的 {$('body').css('padding-top', '70');}});});

body {填充顶部:70px；}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="样式表"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script><nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="容器"><!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">Brand</a>

<!-- 收集导航链接、表单和其他用于切换的内容--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a><li><a href="#">链接</a>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></跨度</a><ul class="dropdown-menu" role="menu"><li><a href="#">动作</a>

<li><a href="#">另一个动作</a><li><a href="#">这里还有别的东西</a><li class="divider"></li><li><a href="#">分隔链接</a><li class="divider"></li><li><a href="#">一个单独的链接</a><ul class="nav navbar-nav navbar-right"><li><a href="#">链接</a>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></跨度</a><ul class="dropdown-menu" role="menu"><li><a href="#">动作</a>

<li><a href="#">另一个动作</a><li><a href="#">这里还有别的东西</a><li class="divider"></li><li><a href="#">分隔链接</a>

<!--/.navbar-collapse -->

<!--/.container-fluid --></nav><div class="容器"><div class="panel panel-default"><div class="panel-heading">没有标题的面板标题</div><div class="panel-body">面板内容

<div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">面板标题</h3>

<div class="panel-body">面板内容