Javascript 更改引导后移动菜单切换错误'；s移动导航断点

我将我的应用程序的移动中断改为900像素，而不是768像素。我在这里找到了这些样式：

CSS工作得很好，当你将窗口缩小到900像素时，导航栏将变成移动版本，而不是等到768。然而，现在有一个奇怪的错误。如果您单击toogle按钮

此HTML如下所示：

<div class="collapse navbar-collapse ng-scope" ng-controller="NavController as nav">

然后结束为：

class="navbar-collapse ng-scope collapse in"

因此，移动菜单在

折叠状态下显示一秒，然后消失：(

需要做的是，
collapse
需要更改为
collapsed
。如果我在Chrome inspector中将类更改为
collapsed
，则移动菜单将显示而不是隐藏

你知道为什么在我的项目中改变引导程序的移动中断似乎会中断吗？
我以为这与我的角度控制器有关，但我删除了该代码，移动菜单切换仍然中断

此技术在本例中运行良好：
您所引用的引导层适用于3.0.3。最好的方法是使用较少的或SAS来调整断点，包括菜单折叠。第二个最好的方法是使用GetBootstrap.com上的自定义程序

这是最不稳定的版本，因为Bootstrap总是在改进CSS和更改内容：

演示：-BOOTSTRAP 3.2

@media (min-width: 768px) and (max-width: 990px) {
    .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;
       height: 0px;
       overflow: hidden;
    }
   .navbar-collapse.collapse.in {
      overflow-y: auto!important;
      display:block!important;
      overflow-x: visible!important;
      overflow-y:hidden!important;
   }
    .navbar-nav {
        float: none;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

我真的很想不使用Bootstrap js，而只是编写自己的代码来打开和关闭切换。但我仍然很好奇为什么会出现这种情况……是的，最好不要使用Bootstrap的jQuery插件。
@media (min-width: 768px) and (max-width: 990px) {
    .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;
       height: 0px;
       overflow: hidden;
    }
   .navbar-collapse.collapse.in {
      overflow-y: auto!important;
      display:block!important;
      overflow-x: visible!important;
      overflow-y:hidden!important;
   }
    .navbar-nav {
        float: none;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}