Jquery 如何防止引导导航栏切换按下内容？

我使用带静态顶部导航栏的引导，如下所示：

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

...

在它的最新版本3.2.0中，当菜单被触发时，引导导航栏切换不幸地向下推小屏幕上的内容

---

如何防止这种行为，即保持内容静态，让移动菜单像以前版本一样覆盖内容？

不确定这是否是解决问题的最佳方法，但这是我为获得预期结果所做的（这与您所要求的类似——阻止导航栏扩展向下推动下方的div）

首先，找出菜单折叠到引导文件中下拉菜单列表的宽度

使用CSS，对于我的折叠状态，我做到了

#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;
}

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

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

#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;
}

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

---

希望这对您和对我一样有效。

我们不必为折叠和正常状态编写不同的代码，我们只需编写一个代码，如下所示：

@media (max-width: 768px) { //bootstrap 3 collapses navbar at 768px
    #NavBar{
        position: absolute;
        width: 100%;
        z-index: 9999;
    }
}

---

当导航栏达到所述小宽度时，将

navbar fixed

类添加到导航栏中？不会解决问题，导航栏不应固定在顶部。