Mobile 引导响应菜单未正确展开

我对响应引导菜单做了一些修改，结果并不是我想要的。我试图在一行上渲染整个菜单，但菜单项比1140px容器中渲染的多，所以我稍微扩展了容器。当调整浏览器大小时，我在1260px处崩溃。菜单被隐藏，移动下拉菜单的汉堡图标按预期显示，但如果单击汉堡，菜单将以内联方式显示，而不是展开移动菜单。至少在我到达992px断点之前。如果删除992px断点的引导规则，则单击burger图标时菜单不会错误呈现，但也不会正常显示。我不知道该怎么解决这个问题。下面有一个链接指向演示该问题的JSFIDLE。当浏览器调整大小时首次显示汉堡图标时，单击它将显示问题。进一步缩小窗口，它将按预期工作

.container{
最大宽度：90%；
宽度：90%；
}
@介质（最大宽度：1260px）{
.导航栏标题{
浮动：无；
}
.导航杆切换器{
显示：块！重要；
}
.导航栏倒塌{
边框顶部：1px实心透明；
框阴影：插入0 1px 0 rgba（255、255、255、0.1）；
}
.折叠：不显示（.show）{
显示：无！重要；
}
.navbar nav>li{
浮动：无；
}
.导航栏导航>李>a{
填充顶部：10px；
垫底：10px；
}
}

好的，这很简单。我只需要将_variables.scss中的“xl”断点变量的值从1200px更改为所需的宽度