我今天也遇到了同样的问题。

引导4

它是一个本地功能:https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

你必须使用.navbar-expand{-sm|-md|-lg|-xl}类:

<nav class="navbar navbar-expand-md navbar-light bg-light">

引导3

@media (max-width: 991px) {
    .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;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

只需更改md尺寸的991px * 1199px。

Demo

Bootstrap 2和Bootstrap 3的最大区别在于，Bootstrap 3是“移动优先”。

这意味着默认样式是为移动设备设计的，在导航栏的情况下，这意味着它在默认情况下是“折叠”的，当它达到一定的最小尺寸时是“展开”的。

Bootstrap 3的网站实际上有一个关于该怎么做的“提示”: http://getbootstrap.com/components/#navbar

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

如果您要重新编译您的LESS，您将在变量中找到注意的LESS变量。更少的文件。它目前被设置为“扩展”@media (min-width: 768px)，这是一个“小屏幕”(即。一个平板电脑)由Bootstrap 3项。

@grid-float-breakpoint: @screen-tablet;

如果你想保持折叠的时间长一点，你可以这样调整:

@grid-float-breakpoint: @screen-desktop;(992 px断点)

或者更快地扩张

@grid-float-breakpoint: @screen-phone (480px断点)

如果你想让它在以后展开，而不是重新编译LESS，你将不得不覆盖在768px媒体查询中应用的样式，并让它们返回到之前的值。然后在适当的时候重新添加它们。

我不确定是否有更好的办法。根据需要重新编译Bootstrap LESS是最好(最简单)的方法。否则，你将不得不找到所有的CSS媒体查询，影响你的导航栏，覆盖他们默认样式@ 768px宽度，然后恢复他们在一个更高的min-width。

重新编译LESS只需要改变变量就可以实现所有这些神奇的功能。这就是LESS/SASS预编译器的意义所在。=)

(注意，我确实把它们都查了一遍，大约有100行代码，这让我放弃了这个想法，只是为给定的项目重新编译Bootstrap，避免意外地搞砸一些事情)

对于那些想要在小于标准768px的宽度处折叠(在小于768px的宽度处展开)的人，这是需要的css:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

最简单的方法是自定义引导

发现变量:

 @grid-float-breakpoint

它被设置为@screen-sm，您可以根据您的需要更改它。 希望能有所帮助!

我今天也遇到了同样的问题。

引导4

它是一个本地功能:https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

你必须使用.navbar-expand{-sm|-md|-lg|-xl}类:

<nav class="navbar navbar-expand-md navbar-light bg-light">

引导3

@media (max-width: 991px) {
    .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;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

只需更改md尺寸的991px * 1199px。

Demo

我很关心自定义Bootstrap之后的维护和升级问题。我可以在今天编写定制步骤的文档，并希望三年后升级Bootstrap的人能够找到文档并重新应用这些步骤(在那时可能工作，也可能不工作)。我认为这两种方法都可以，但我更喜欢在代码中保留任何自定义。

不过，我不太明白Seb33300的方法是如何起作用的。当然，Bootstrap 4.0.3不能正常工作。为了使导航栏扩展到1200而不是768，必须重写媒体查询的规则，以防止扩展到768和强制扩展到1200。

我有一个更长的菜单，可以在iPad的纵向模式下自动换行。 下面将菜单一直折叠到1200断点:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}