如何防止Bootstrap Navbar切换到按下内容？ [英] How to prevent Bootstrap Navbar Toggle from pushing down content?

问题描述

我使用Bootstrap和静态顶部导航条，如下所示：

I am using Bootstrap with a static top navbar like so:

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
   ...
  </div>
</nav>

在最新版本3.2.0中，Bootstrap navbar toggle不幸地将小屏幕上的内容下推，

In it's latest version 3.2.0, the Bootstrap navbar toggle unfortunately pushes down the content on small screens, when the menu is triggered.

如何防止这种行为，即保持内容静态，让手机菜单重叠内容，就像以前的版本一样？

How can this behaviour be prevented, i.e. keep the content static and let the mobile menu overlay the content like it used to be in previous versions?

推荐答案

不知道这是否是解决问题的最佳方法，但这是我做了我想要的结果类似于你所要求的 - 停止导航栏扩展，从下推它的div）。

Not sure if this is the best way to fix your issue but this is what I did to get my intended results (which is similar to what you've asked - to stop the navbar expansion from pushing down the divs below it).

首先，找出你的菜单折叠到你的宽度

First, find out at what width your menu collapses to your drop down menu list in your bootstrap file.

使用CSS，对于折叠状态，我执行了

Using CSS, for my collapsed state, I did

#NavBar {
    position: absolute; -- this is what positioned my navbar at the top without pushing any content down (and also doesn't follow when you scroll down)
    width: 100%; -- you'll have to modify this to how big your width is
    z-index: 9999;
}

对于我的正常状态，我做了

and for my normal state, I did

@media (min-width: 992px) {
    #NavBar {
        position: relative; -- normal navbar usage
    }
}

它为我。

这篇关于如何防止Bootstrap Navbar切换到按下内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！