我正在使用带有静态顶部导航栏的 Bootstrap,如下所示:
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
...
</div>
</nav>
在最新版本 3.2.0 中,不幸的是,当菜单被触发时,Bootstrap 导航栏切换会将内容下推到小屏幕上。
如何防止这种行为,即保持内容静态并让移动菜单覆盖内容,就像以前的版本一样?
最佳答案
不确定这是否是解决问题的最佳方法,但这是我为获得预期结果所做的(这与您所要求的类似 - 阻止导航栏扩展下推其下方的 div) .
首先,在您的 Bootstrap 文件中找出您的菜单折叠到下拉菜单列表的宽度。
使用 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
}
}
希望这对你有用,就像对我一样。
关于jquery - 如何防止 Bootstrap Navbar Toggle 下推内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24923117/