如何防止Bootstrap Navbar Toggle推送内容？

我正在使用带有静态顶部导航栏的Bootstrap，如下所示：

 
 ... 
  

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

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

Answer 1

不确定这是否是解决问题的最佳方法，但这是我为获得预期结果而做的事情（类似于你所要求的 – 停止导航栏扩展以推下它下方的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 } } 

希望这对你有用，就像它对我一样。

Answer 2

我们可以只编写单个代码，而不是为折叠和正常状态编写不同的代码：

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