Html Boostrap4导航栏，有2行，居中标志可折叠

我想让两行导航栏看起来像这样

                        CompanyLogo                  link  link  link
-----------------------------------------------------------------------
 link(dropdown)        link       link      link      link      link

公司徽标（居中），上部3个链接（右对齐）。 上面的3个链接应该折叠成徽标

整个第二行居中对齐，可折叠。这是我的密码：

注意：我不知道你所说的“上面的3个链接应该折叠成徽标”是什么意思，所以我只是将它们与其他导航栏项目一起放在小屏幕上

HTML 导航栏HTML应该是直接的。您可以查看引导文档

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a href="#" class="navbar-brand">
    CompanyLogo
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav upper-controls">
      <li class="nav-item">
        <a class="nav-link" href="#">Country</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Language</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sign up | Sign in</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
          Categories
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item">Cat 1</a>
          <a class="dropdown-item">Cat 2</a>
          <a class="dropdown-item">Cat 3</a>
          <a class="dropdown-item">Cat 4</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Live Auction</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Make Your Wish</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">How it works</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Purchase Bid Credits</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact us</a>
      </li>
    </ul>
  </div>
</nav>

后果

在更大的屏幕上（>992px） 我们可以将导航栏的

flex flow

更改为列，以便显示2行。此外，我们还可以将上面的3个链接（我为其指定了自定义css类“upper controls”）更改为绝对定位，原因与我们在上面的按钮切换器上所做的相同

CSS 后果

---

小提琴：

我想你的意思是“行”而不是“列”。您的示例有两行，每行有4列和6列。这也可能有帮助：

/* center the logo */
.navbar {
  justify-content: center;
}

/* in order to center the logo */
.navbar .navbar-toggler {
  position: absolute;
  right: 1rem;
  top: .5rem;
}

/* center all navbar items */
.navbar-nav {
  align-items: center;
}

/* since it's expanding at lg */
@media(min-width: 992px) {
  /* in order to display in 2 rows */
  .navbar-expand-lg {
    flex-flow: column nowrap;
  }  

  /* same logic as the navbar-toggler above */
  .navbar-nav.upper-controls {
    position: absolute;
    right: 1rem;
    top: .5rem;
    font-size: 85%;
  }
}