我刚刚通过使用下面的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;
    }

}

在bootstrap3中，将这个变量@grid-float-breakpoint更改为您需要的值。默认值是768px

2018年更新

引导4

在Bootstrap 4中使用navbar-expand-*类更容易更改导航栏断点:

<nav class=“navbar fixed-top navbar-expand-sm”>..</nav>

Navbar-expand-sm = xs屏幕上的移动菜单<576px Navbar-expand-md = sm屏幕上的移动菜单<768px Navbar-expand-lg = md屏幕上的移动菜单<992px Navbar-expand-xl = lg屏幕上的移动菜单<1200px Navbar-expand =从不使用手机菜单 (没有扩展类)=总是使用移动菜单

如果排除navbar-expand-*，移动菜单将在所有宽度下使用。下面是所有6个导航栏状态的演示

您还可以通过添加一些CSS来使用自定义断点(?? px)。例如，这里是1300px..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

引导4自定义导航栏断点 引导4导航栏断点示例

---

**Bootstrap 3**

用于引导3.3。x，这里是覆盖导航栏断点的工作CSS。将991px更改为你想让导航栏折叠的点的像素尺寸…

@media (max-width: 991px) {
  .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;
  }
}

991px的工作示例:http://www.bootply.com/j7XJuaE5v6 1200px的工作示例:https://www.codeply.com/go/VsYaOLzfb4(带有搜索表单)

注意:以上适用于任何超过768px的东西。如果您需要将其更改为小于768px，则小于768px的示例如下。

---

这是我的工作代码。(也下拉导航栏链接工作)

@media (max-width: 1199px) {
  .navbar-nav {
    margin: 7.5px -15px;
 }
  .ul-links {
    display: block;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }  
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }

  .navbar-collapse.collapse {
      display: none!important;
      max-height: none;
  }
  .navbar-nav {
      float: none!important; 
  }
  .navbar-nav>li {
      float: none;
  } 
  .collapse.in{
      display:block !important;
  }
 .navbar-nav .open .dropdown-menu {
     position: static;
     float: none;
     width: auto;
     margin-top: 0;
     background-color: transparent;
     border: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
  }
}

在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%;
    }
}

现在Bootstrap 4.4支持它

navbar-expand-sm