在Bootstrap 3 . less源代码中，变量中定义了一个变量。Less被称为@grid-float-breakpoint，它有以下有用的评论:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

匹配的@grid-float-breakpoint-max值设置为- 1px:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

解决方案:

所以只需将@grid-float-breakpoint的值设置为1000px，然后重新构建bootstrap。较少进入bootstrap.css:

e.g.

@grid-float-breakpoint: 1000px;

Sass改变引导变量的方法实际上在bootstrap- Sass github页面上有文档。

只需在@import bootstrap之前重新定义变量:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

在bootstrap 4中，如果你想覆盖navbar-expand-*，展开和折叠，显示和隐藏汉堡包(navbar-toggler)，你必须在bootstrap.css中找到那个样式/定义，并在你自己的customstyle.css中重新定义它(或者直接在bootstrap.css中，如果你愿意的话)。

如。我想让navbar-expand-lg折叠并显示navbar-toggler 在950 px。在bootstrap.css中我发现:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

再往下……

@media (min-width:992px) { 
    ... lots of styling ...
}

我复制了两个@media查询，并将它们粘在我的style.css中，然后修改大小以适应我的需要。在我的案例中，我想让它在950px处折叠。@media查询必须是不同的大小(我猜)，所以我设置容器的max-width为949.98px，并使用950px的另一个@media查询，所以下面的代码被追加到我的style.css。这并不容易从我在Stackoverflow和其他地方找到的扭曲解决方案中解脱出来。希望这能有所帮助。

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

我刚刚通过使用下面的CSS代码成功地做到了这一点。

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

现在Bootstrap 4.4支持它

navbar-expand-sm 

对于Bootstrap 3.3，这是你唯一需要的代码:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}