控制 Bootstrap 4 响应式导航栏上的换行

Question

我有一个 BS4 导航栏几乎按我想要的方式工作，但不完全是。

我在左边有一个导航栏品牌，在右边有四个链接。

Navbar with links

在某个断点处，链接消失，取而代之的是汉堡包按钮。

Navbar with hamburger

如果您单击汉堡包，链接会出现在它的下方。

Hamburger with expanded links

这就是我想要的。

但是，如果进一步减小 window 宽度，导航栏会换行，并且汉堡包会出现在徽标下方。

Misplaced hamburger

这是我不想要的。我希望汉堡包留在原处，并缩小徽标尺寸 (img-fluid)。

我可以通过将 flex-nowrap class 添加到主导航栏元素来实现这一点。但这会导致另一个问题：当您单击汉堡包时，链接会出现在它的右侧，而不是下方。

Misplaced links

有没有一种方法可以阻止汉堡包包装，同时在您单击它时仍然在其下方显示链接？

代码如下：

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="#">
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Stack_Overflow_logo.svg" class="img-fluid" style="max-height: 4rem" alt="Logo">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#toggleMenu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="toggleMenu">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 4</a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

您可以通过设置导航栏的最小宽度和导航栏品牌的最大宽度来完成此操作。

.navbar{
  min-width: 255px;
}
.navbar-brand {
  max-width: 65%;
}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="#">
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Stack_Overflow_logo.svg" class="img-fluid" style="max-height: 4rem" alt="Logo">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#toggleMenu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="toggleMenu">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-right" href="#">item 4</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

控制 Bootstrap 4 响应式导航栏上的换行

Controlling wrapping on Bootstrap 4 responsive navbar

bootstrap-4

responsive