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"

因此，移动菜单会在collapsing状态下显示分秒，然后消失:(

需要做的是collapse需要更改为collapsed。如果我在Chrome检查器中将课程更改为collapsed，则会显示移动菜单，但不会隐藏。

任何想法为什么改变Bootstrap移动中断似乎在我的项目中出现问题？我认为它与我的Angular控制器有关，但我删除了该代码，移动菜单切换仍然没有。

此示例在此示例中运行正常：http://www.bootply.com/105915

Answer 1

你引用的Bootply是针对3.0.3的。最好的方法是使用LESS或SASS来调整断点，包括菜单崩溃。第二种最好的方法是在GetBootstrap.com上使用定制器。

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

DEMO：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;
    }
}

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

1 个答案: