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

Question

我试图在中型和小型屏幕上保持 navbrand 和 nav-items 之间的距离，所以我给 nav-item 填充顶部它工作正常但它在项目之间也留下了巨大的 space我尝试通过向徽标添加填充按钮来使用 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

尝试使用 bootstrap 间距类，例如

mb-1 mb-lg-0

到导航栏品牌

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

keep distance between navbrand and nav-items on small screens

navbar

bootstrap-5