如何将 Bootstrap 3 导航栏保持为所有屏幕尺寸的折叠状态

Question

在 bootstrap 3 中，我希望所有屏幕尺寸的导航栏默认折叠。

我发现here Bootstrap 3 是移动优先的，它的导航栏默认是“折叠”的，当它达到某个最小尺寸时会“展开”。在那个帖子之后，我试着弄乱@grid-float-breakpoint对于customized css，但我一无所获。请从这里指导我。

Answer 1

您可以使用 CSS 覆盖 Bootstrap 3 默认值。例如，这会将导航栏设置为在小于 2000 像素的屏幕宽度上折叠（适用于大多数屏幕）..

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

演示：http://www.bootply.com/122572

---

Bootstrap 4（测试版）更新

在 Bootstrap 4 中，导航栏默认总是折叠到移动版/汉堡版中：Demo。 navbar-expand-* 类用于更改断点。