如何使bootstrap导航栏在移动菜单上下推整个页面？

Question

虽然有一个相关的问题,但他的问题似乎是我的解决方案,但我没有想法取得进展.

我正在使用固定在顶部的bootstrap导航栏来制作..导航菜单.在移动页面上(屏幕尺寸很小),我必须按下最右上角的一些菜单按钮来显示它们.

然而,当菜单弹出时,我希望它将页面向下推,而不是覆盖它.

这是我的代码..我应该做什么编辑来摆脱覆盖？

<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>

Answer 1

您似乎已经定义了.navbar的高度,它强制折叠菜单覆盖.只需将.navbar中的高度更改为min-height

.navbar
{
    min-height:65px; // or value of your desire
}

如果没有解决,请发布你的CSS

Answer 2

添加

$('.navbar-toggle').on('click', function() {
  $('.after-navbar').css('margin-top','230px');
});

请在这里找到工作示例http://jsfiddle.net/LptkL/