我用CSS的方式安装Bootstrap 3.0.0，因为我不太熟悉LESS。下面是我添加到我的自定义css文件(我在bootstrap.css后加载)的代码，它允许我控制，所以菜单总是像手风琴一样工作。 注意:我将整个导航栏与类边栏一起包装在一个div中，以分离出我想要的行为，这样它就不会影响我网站上的其他导航栏，比如主菜单。根据您的需要进行调整，希望对您有所帮助。

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

附加说明:我还对主菜单导航栏的切换进行了更改(因为我网站上的代码用于侧面的“子菜单”)。

我改变了:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

成:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

然后调整:

<div class="navbar-collapse collapse navbar-collapse">

成:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

如果你只有一个导航栏，我猜你不需要担心这个，但它在我的情况下帮助了我。

nabvar会在小型设备上崩溃。折叠点由变量中的@grid-float-breakpoint定义。默认情况下，它将在768px之前。对于屏幕宽度低于768像素的屏幕，导航栏看起来是这样的:

可以在变量中更改@grid-float-breakpoint。并重新编译引导程序。当这样做时，你还必须改变navbar.less中的@screen-xs-max。您必须将这个值设置为新的@grid-float-breakpoint -1。参见:https://github.com/twbs/bootstrap/pull/10465。这是需要改变导航栏形式和下拉菜单在@grid-float-breakpoint到他们的移动版本。

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

引导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

我想我找到了一个简单的解决方案来改变折叠断点，只是通过css。

我希望其他人能确认，因为我没有彻底测试，我不确定这个解决方案是否有副作用。

您必须更改以下类定义的媒体查询值:

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

这是为我目前的项目工作，但我仍然需要改变一些css定义，以适当地安排所有屏幕大小的菜单。

希望这能有所帮助。

感谢Seb33300，我得到了这个工作。然而，一个重要的部分似乎被遗漏了。至少在Bootstrap 3.1.1版本中是这样。

我的问题是，导航栏在正确的宽度上相应地折叠，但菜单按钮不起作用。我无法展开和折叠菜单。

这是因为崩溃。In类被.navbar-collapse中的!important重写。也可以通过添加“Collapse .in”来解决。Seb33300的例子完成如下:

@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-collapse.collapse.in {
        display: block!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;
    }
}

如果您面临的问题是菜单分解成多行，您可以尝试以下方法之一:

1)尽量减少菜单项的数量或长度，如删除菜单项或缩短单词。

2)减少菜单项之间的填充，就像这样:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

默认填充两边15px(左右)。

如果您更喜欢改变每个单独的用途:

padding-left: 7px; 
padding-right: 8px;

此设置也会影响下拉列表。

这并没有回答问题，但它可以帮助那些不想乱动CSS或使用LESS变量的人。解决这个问题的两种常见方法。