如何使Bootstrap Navbar在移动菜单上推下整个页面

尽管有一个相关的问题，但他的问题似乎是我的解决方案，但我不知道取得进展。

我正在使用固定在顶部进行的Bootstrap Navbar。导航菜单。在移动页面上（屏幕尺寸很小），我必须按下最高角上的某个菜单按钮来携带它们。

但是，当菜单弹出时，我希望它能将页面向下推，而不是覆盖它。

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

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

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

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

如果未解决的话，也要发布您的CSS。

第一版。将`padding-top`设置为两个常数

使用.navbar-fixed-top类使用Navbar时需要身体填充：

固定的Navbar将覆盖您的其他内容，除非您将填充物添加到<body>的顶部。

默认情况下，Navbar为50px。

请确保在Core Bootstrap CSS之后包含此内容。
崩溃事件有助于更改padding-top属性的值：

show.bs.collapse在调用Show实例方法时立即发射。

hide.bs.collapse在调用隐藏方法时立即发射。
您可以从.collapsing类复制transition属性。
当菜单保持扩展时，用户可以增加窗口的宽度。在这种情况下，有必要减少body的padding-top属性。例如，由Media-Query和!important。

所以让我们使用两个常数-50px和235px定义padding-top值。

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>

第二版。使用`outerHeight()`

让我们通过outerHeight()函数设置padding-top值。

，当用户将屏幕宽度增加到768px或更多时，让我们倒塌。

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>

您需要使身体降低动画。我需要查看更多代码以获得此确切，您需要jQuery，但请尝试一下...

$('.navbar').on('click', function() {
    var height = ($('.navbar-collapse.in').length == 0) ? $(this).height() : 0;
    $('body').css({
        marginTop: height
    })
});

更新：包括代码，以计算导航In或Out。这确实无法正常运行，因为您需要在AIND启动时要发射大部分代码。但是，您可以删除$（this）.height（），然后用硬编码的像素量替换等于等于您的导航高度

add

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

请在此处找到工作示例http://jsfiddle.net/lptkl/

也许您正在寻找最大高度：

CSS

.navbar-collapse {
    max-height: 150px;
}

这样，您将为您的菜单有一个不错的滚动条。

您可以使用js。

上的resize事件，根据window大小的max-height。

将navbar-fixed-top更改为navbar-static-top。

第一版。将`padding-top`设置为两个常数

第二版。使用`outerHeight()`

相关内容

最新更新

热门标签：

如何使Bootstrap Navbar在移动菜单上推下整个页面

第一版。将padding-top设置为两个常数

第二版。使用outerHeight()

相关内容

最新更新

热门标签：

第一版。将`padding-top`设置为两个常数

第二版。使用`outerHeight()`