Bootstrap 4品牌形象崩溃而媒介链接没有在中等崩溃？

Question

<header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">

      <img class="navbar-brand d-sm-none d-md-block" src="img/logo.png"></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Servicer</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Trailer List</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">News</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

我希望图像在中等大小的屏幕上消失，导航链接要居中，而汉堡弹出式图标变小。我要怎么做呢？

Answer 1

您可以使用媒体查询来设置断点，然后将可见性设置为隐藏