<强> 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
最佳答案
您引用的 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;
}
}
关于javascript - 更改 Bootstrap 的移动导航断点后移动菜单切换错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26389771/