在较小的窗口中为什么我的徽标会移动

Question

当我将窗口调整为较小尺寸时，为什么徽标会向右移动而不是紧贴在折叠图标旁边。

CODEPLY：https://www.codeply.com/go/jXwAJWRAL5

<nav class="navbar navbar-expand-lg fixed-top" style="background-color: black">
      <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="logo.png" width="300" height="60"></a>

      <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
        <ul class="navbar-nav">
          <li><a class="nav-item nav-link" href="#">Features</a></li>
          <li><a class="nav-item nav-link" href="#">Leaderboard</a></li>
          <li><a class="nav-item nav-link" href="#">Contact</a></li>
        </ul>
        <ul class="navbar-nav ml-auto">
          <li><a class="nav-item nav-link" href="#">Log In</a></li>
          <li><a class="nav-item nav-link" href="#">Register</a></li>
        </ul>
      </div>
    </nav>

Answer 1

您有3个元素，一个隐藏的汉堡导航，一个徽标和一些菜单项。 响应时，它将显示汉堡导航，并隐藏使其变为burger nav |的菜单项。 logo代替logo | menu items。

您应该将其设为logo | Burger Nav | Menu Items，因此当他们被显示和隐藏时，他们只占另一个留下的空间。就像将<button>移到<a>标签下面一样简单。