在小屏幕上保持 navbrand 和 nav-items 之间的距离

Question

我试图在中小屏幕上保持 navbrand 和 nav-items 之间的距离，所以我让 nav-item padding 顶部工作正常，但它在项目之间留下了很大的空间，我也尝试使用 jquery通过在徽标上添加填充按钮，但它无法正常工作并且徽标越来越小。

  <nav class="navbar navbar-expand-lg navbar-light bg-dark">
      <div class="container-fluid">
          <a href="#" class="navbar-brand">
              <img class="logo" src="./images/logo.png" height="120" alt="Logo">
          </a> 
          <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse " id="navbarCollapse">
              <div class="navbar-nav ms-auto">
                  <a href="#" class="nav-item nav-link active">Home</a>
                  <a href="#" class="nav-item nav-link">Bio</a>
                  <a href="#" class="nav-item nav-link">Merch</a>
                  <a href="#" class="nav-item nav-link">Releases</a>
                  <a href="#" class="nav-item nav-link">Videos</a>
              </div>
          </div>
      </div>
  </nav>

.navbar-light .navbar-nav .nav-item{

margin-top: 50px;

}

Answer 1

例如，尝试使用引导间距类

mb-1 mb-lg-0

导航栏品牌