twitter-bootstrap 如何使引导导航栏在移动菜单上下推整个页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21449999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make bootstrap navbar to push down the whole page on mobile menu?
提问by thkang
Although there is a related question, his problem seems like my solution but I have no Idea to make progress.
虽然有一个相关的问题，但他的问题似乎是我的解决方案，但我没有取得进展的想法。
I'm using bootstrap navbar that is fixed to the top to make.. navigation menu. on mobile pages(where screen size is small), I have to bring them by pressing some menu button on top-rightmost corner.
我正在使用固定在顶部的引导导航栏来制作..导航菜单。在移动页面（屏幕尺寸较小）上，我必须通过按最右上角的某个菜单按钮来显示它们。
however when the menu pops up, I'd like it to push the page down, instead of overlaying it.
但是当菜单弹出时，我希望它向下推页面，而不是覆盖它。
here's my code.. what edit should I make to get rid of overlaying?
这是我的代码..我应该进行什么编辑来摆脱覆盖？
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#!/">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#!/notice">notice</a></li>
<li><a href="#!/board">board</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a id="a-logout" href="#!/logout">sign out</a>
</li>
<li>
<a href="#!/user">Your page</a>
</li>
</ul>
</div>
</div>
</div>
回答by Akash
It seems that you have defined the height of .navbarwhich is forcing the collapsed menu to overlay. Just change height in .navbarto min-height
似乎您已经定义了.navbar强制折叠菜单覆盖的高度。只需将高度更改.navbar为min-height
.navbar
{
min-height:65px; // or value of your desire
}
If not solved kindly post your CSS too.
如果没有解决，请也发布您的 CSS。
回答by jordan
Change navbar-fixed-topto navbar-static-top.
更改navbar-fixed-top为navbar-static-top。
回答by Gleb Kemarsky
1st version. Setting padding-topby two constants
第一个版本。padding-top通过两个常量设置
Body padding is requiredwhen you use a navbar with the
.navbar-fixed-topclass:The fixed navbar will overlay your other content, unless you add padding to the top of the
<body>.By default, the navbar is 50px high.
Make sure to include this after the core Bootstrap CSS.
Collapse eventshelp to change the value of the
padding-topproperty:show.bs.collapsefires immediately when the show instance method is called.hide.bs.collapseis fired immediately when the hide method has been called.You can copy
transitionproperties from the.collapsingclass.User can increase the width of the window while the menu stays expanded. In this case it is necessary to reduce the
padding-topproperty for thebody. For example by media-query and!important.
当您在
.navbar-fixed-top类中使用导航栏时需要身体填充：固定导航栏将覆盖您的其他内容，除非您在
<body>.默认情况下，导航栏高 50 像素。
确保在核心 Bootstrap CSS 之后包含它。
折叠事件有助于更改
padding-top属性的值：show.bs.collapse当调用 show 实例方法时立即触发。hide.bs.collapse当调用 hide 方法时立即触发。您可以从类中复制
transition属性。.collapsing用户可以在菜单保持展开的同时增加窗口的宽度。在这种情况下，有必要减少 的
padding-top属性body。例如通过媒体查询和!important.
So let's define padding-topvalue using two constants - 50pxand 235px.
因此，让我们padding-top使用两个常量 -50px和来定义值235px。
var selectBody = $('body');
/* 2. */
$('.navbar-collapse').on('show.bs.collapse', function () {
selectBody.css('padding-top', '235px');
})
$('.navbar-collapse').on('hide.bs.collapse', function () {
selectBody.css('padding-top', '50px');
})@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
/* 1. */
padding-top: 50px;
/* 3. */
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .35s;
-o-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: padding-top;
-o-transition-property: padding-top;
transition-property: padding-top;
}
/* 4. */
@media (min-width: 768px) {
body {
padding-top: 50px !important;
}
}<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Left 1</a></li>
<li><a href="#">Left 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Right 1</a></li>
<li><a href="#">Right 2</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<h1>Header 1</h1><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
<h2>Header 2</h2><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
<h3>Header 3</h3><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>2nd version. Using outerHeight()
第二版。使用outerHeight()
Let's set the padding-topvalue by the outerHeight()function.
让我们设置的padding-top按价值计算的outerHeight()功能。
And let's collapse navbar when user increase the screen width to 768pxor more.
当用户将屏幕宽度增加到768px或更多时，让我们折叠导航栏。
http://codepen.io/glebkema/pen/PGbZPG
http://codepen.io/glebkema/pen/PGbZPG
var selectBody = $('body');
var selectNavbarCollapse = $('.navbar-collapse');
var heightNavbarCollapsed = $('.navbar').outerHeight(true);
var heightNavbarExpanded = 0;
paddingSmall();
selectNavbarCollapse.on('show.bs.collapse', function() {
if (heightNavbarExpanded == 0) heightNavbarExpanded = heightNavbarCollapsed + $(this).outerHeight(true);
paddingGreat();
})
selectNavbarCollapse.on('hide.bs.collapse', function() {
paddingSmall();
})
$(window).resize(function() {
if ((document.documentElement.clientWidth > 767) && selectNavbarCollapse.hasClass('in')) {
selectNavbarCollapse.removeClass('in').attr('aria-expanded', 'false');
paddingSmall();
}
});
function paddingSmall() {
selectBody.css('padding-top', heightNavbarCollapsed + 'px');
}
function paddingGreat() {
selectBody.css('padding-top', heightNavbarExpanded + 'px');
}@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .35s;
-o-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: padding-top;
-o-transition-property: padding-top;
transition-property: padding-top;
}<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Left 1</a></li>
<li><a href="#">Left 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Right 1</a></li>
<li><a href="#">Right 2</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<h1>Header 1</h1><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
<h2>Header 2</h2><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
<h3>Header 3</h3><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>回答by user2783484
add
添加
$('.navbar-toggle').on('click', function() {
$('.after-navbar').css('margin-top','230px');
});
Please Find working example here http://jsfiddle.net/LptkL/
请在这里找到工作示例http://jsfiddle.net/LptkL/
回答by paulruescher
You'll need to animate the body down. I'd need to see more code to get this exact, and you'd need jQuery, but try this...
您需要向下动画身体。我需要查看更多代码才能准确实现这一点，而您需要 jQuery，但试试这个……
$('.navbar').on('click', function() {
var height = ($('.navbar-collapse.in').length == 0) ? $(this).height() : 0;
$('body').css({
marginTop: height
})
});
UPDATE:include code to account for if the nav is in or out. This really isn't going to work well since you'll need to fire most of this code after the nav has animated in. You can however remove $(this).height() and replace with a hard-coded pixel amount equal to the height of your nav.
更新：包括代码来说明导航是进还是出。这确实不会很好地工作，因为您需要在导航完成动画后触发大部分代码。但是，您可以删除 $(this).height() 并替换为等于的硬编码像素数量导航的高度。
回答by agastalver
Maybe you are looking for max-height:
也许您正在寻找最大高度：
CSS
CSS
.navbar-collapse {
max-height: 150px;
}
This way you will have a nice scroll bar for your menu.
这样你的菜单就会有一个漂亮的滚动条。
You can ajust the max-heightdepending on the windowsize using the resizeevent on JS.
您可以使用JS 上的事件max-height根据window大小调整resize。
