0

我.nav-collapse在引导程序中创建了带有可折叠类的菜单。当我调整窗口大小时，它消失了。所以我.nav-collapse用这个css覆盖了类：

.nav-collapse, .nav-collapse.collapse {
    height: auto;
    overflow: visible;
}

这不是每次都这样做的理想方式。看看这个jsfiddle并从 css 中删除上述样式。会更容易理解。

问题：是否有一个简单的内置解决方案用于在引导程序中堆叠水平菜单？

4

2 回答 2

3

Bootstrap 确实内置了堆叠：http: //twitter.github.io/bootstrap/components.html#navs

在您的情况下，这将是正确的布局.nav-collapse：

<div class="top-nav">
    <div class="container-fluid">
        <div class="nav-collapse collapse">
            <ul class="nav nav-tabs">
                <li><a href="#">Item1</a></li>
                <li><a href="#">Item2</a></li>
                <li><a href="#">Item3</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

然后我会做的是从bootstrap-responsive.css一个单独的覆盖默认媒体查询bootstrap-overrides.css：

@media (max-width: 979px) {
    .top-nav .nav-collapse, .top-nav .nav-collapse.collapse {
        height: auto;
        overflow: visible;
    }
}

小提琴

于 2013-05-13T09:27:19.860 回答
0

如果你使用“nav”类，在调整大小时它会变成按钮。您的请求可以通过使用“nav-stacked”类来实现。看这个例子http://twitter.github.io/bootstrap/components.html#navs -> Stackable

于 2013-05-13T12:23:11.673 回答