引导响应菜单未正确扩展答案

【问题标题】：Bootstrap Responsive Menu Not Expanding Correctly引导响应菜单未正确扩展
【发布时间】：2020-01-26 00:57:09
【问题描述】：

我稍微修改了响应式 Bootstrap 菜单，但结果并不是我想要的。我试图让整个菜单在一行上呈现，并且菜单项比在 1140px 容器中呈现的要多，所以我稍微扩展了容器。调整浏览器大小时，我在 1260 像素处中断。菜单被隐藏，移动下拉菜单的汉堡图标按预期显示，但如果我单击汉堡，菜单会内联显示，而不是展开移动菜单。至少在我到达 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>

jsFiddle

【问题讨论】：

标签： mobile bootstrap-4 menu responsive

【解决方案1】：

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

【讨论】：