javascript - 更改 Bootstrap 的移动导航断点后移动菜单切换错误

Question

<强> http://leongaban.com/_work/portal/app/#/

我更改了我的 bootstrap 的移动休息时间应用程序到 900 像素而不是 768。我在这里找到了样式:https://coderwall.com/p/wpjw4w

CSS 效果很好，当您将窗口缩小到 900 像素时，导航栏将更改为移动版本，而不是等到 768。但是现在有一个奇怪的错误。如果您单击“toogle”按钮。

下面的 HTML:

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

瞬间对此进行更改:

class="navbar-collapse ng-scope collapsing"

最终结果为:

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

因此，移动菜单会在折叠状态下显示一瞬间，然后消失:(

需要发生的是，collapse 需要更改为 collapsed。如果我在 Chrome 检查器中将类更改为 collapsed，那么移动菜单将显示而不是隐藏。

知道为什么更改 Bootstrap 移动中断似乎会破坏我的项目吗？我认为这与我的 Angular Controller 有关，但我删除了该代码，并且移动菜单切换仍然损坏。

此技术在此示例中运行良好:http://www.bootply.com/105915

Answer 1

您引用的 Bootply 适用于 3.0.3。最好的方法是使用 LESS 或 SASS 来调整断点，包括菜单折叠。第二种最佳方法是使用 GetBootstrap.com 上的定制器。

这是最不稳定的版本，因为 Bootstrap 始终在改进其 CSS 并更改内容:

演示:http://jsbin.com/noyale/2/edit - 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;
    }
}