Question

我对响应式Bootstrap菜单进行了一些修改，结果与我想要的不完全相同。我试图使整个菜单在一行上呈现，并且菜单项比1140px容器中可以呈现的菜单项更多，因此我对容器进行了扩展。调整浏览器大小时，我的分辨率为1260px。菜单处于隐藏状态，并且移动下拉菜单的汉堡包图标按预期显示，但是如果我单击汉堡包，则菜单显示为嵌入式显示，而不是展开移动菜单。至少直到我到达992px断点为止。如果我删除了992px断点的Bootstrap规则，则在单击“汉堡”图标时菜单不会正确显示，但也不会正常显示。我不确定该如何解决。 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

Answer 1

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

Bootstrap响应式菜单无法正确展开

1 个答案: