twitter-bootstrap-3 - Twitter Bootstrap 3 navbar-collapse - 将宽度设置为折叠

Question

我使用 Twitter Bootsrap 3 navbar-collapse：http ://bootply.com/91119

当您减小页面宽度时，菜单会分成两行，然后折叠。我没有分成两行，但想做折叠。我该怎么办？

Answer 1

您可以减少导航栏折叠的点。

选项1

来自 Bootstrap 文档 ( http://getbootstrap.com/components/#navbar )

根据导航栏中的内容，您可能需要更改导航栏在折叠模式和水平模式之间切换的点。自定义 @grid-float-breakpoint 变量或添加您自己的媒体查询。

选项 2

如果您不想要自定义 Bootstrap 构建，您可以使用 CSS 媒体查询。例如这里将断点设置为 1280 像素：

@media (max-width: 1280px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

http://www.bootply.com/98488

Bootstrap 3.1 更新

3.1 中的导航栏发生了变化，因此覆盖断点的 CSS 与 3.0 不同。这将防止导航栏在 3.1 http://www.bootply.com/120604中显示然后突然崩溃