twitter-bootstrap-3 - Twitter Bootstrap 3 导航栏折叠 - 将宽度设置为折叠

Question

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

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

Answer 1

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

选项 1

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

Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

选项 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