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

Question

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

.container {
max-width: 90%;
width: 90%;
}
@media (max-width: 1260px) {
.navbar-header {
float: none;
}
.navbar-toggler {
display: block!important;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.collapse:not(.show) {
display: none!important;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container horizontal-padding-0">
<a href="#" class="navbar-brand mb-3">
<h2>TITLE</h2>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNav" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="menu-links">AAAA</a>
</li>
<li class="nav-item">
<a href="#" class="menu-links">BBBBBBBBB BBBBBBBB</a>
</li>
<li class="nav-item">
<a href="#" class="menu-links">CCCCCCCCCC</a>
</li>
<li class="nav-item">
<a href="#" class="menu-links">DDDDDDD</a>
</li>
<li class="nav-item">
<a href="#" class="menu-links">EE EEEEE</a>
</li>
<li class="nav-item">
<a href="#" class="menu-links">FFFFFFF</a>
</li>
<li class="nav-item">
<a href="#" class="menu-links">GGGGG</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

js小提琴

Answer 1

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