Twitter Bootstrap 3导航栏折叠-设置折叠宽度

Question

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

当你缩小页面宽度时，菜单会分成两行，然后折叠。 我不想分成两行，但是希望它能折叠。 我该怎么做？

- motorcb

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

- Zim

---

谢谢Skelly，它对我也有帮助 :) - Alyas

在3.1版本中，自定义@grid-float-breakpoint选项仍然有效，因为Less仍然使用此变量来生成更新的CSS。我喜欢修改变量的技巧是在我的项目中使用源Less，并在导入bootstrap.less的新LESS文件中单独覆盖变量 - 这样，您可以升级到较新版本的Bootstrap而不会失去任何自定义内容。 - Andrew Trevers