Question

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

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

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

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

Answer 1

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

fiddle

Answer 2

如果您使用“nav”类，则在调整大小期间它将变为按钮。您可以使用“nav-stacked”类来实现您的请求。请参阅此示例http://twitter.github.io/bootstrap/components.html#navs - ＆gt;可堆叠

bootstrap - 堆栈水平菜单

2 个答案: