具有两行和居中徽标的Boostrap4 NavBar可折叠

Question

我希望两行导航栏显示为这样

RoundRectBorder

公司徽标（居中），上方3个链接（向右对齐）。 上方的3个链接应折叠到徽标中。

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

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

Answer 1

注意：我不知道您的意思是“上方的3个链接应折叠到徽标中”，因此我只是将它们与其他导航栏项目一起放在小屏幕上。

HTML

导航栏HTML应该简单明了。您可以查看Bootstrap文档。

<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>

在小屏幕上

同样，我不知道您将3个链接折叠到徽标中是什么意思，所以我只是将它们放在其他导航栏项目之前。

这里最棘手的部分是使徽标居中。为此，除了在导航栏上设置justify-content: center;之外，我还需要将按钮切换器更改为绝对定位，以使其不会占用任何空间来防止徽标停留在中心位置。

CSS

/* 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;
}

结果

在大屏幕上（> 992px）

我们可以将导航栏的flex-flow更改为列，以便显示2行。同样，出于与上面按钮切换器相同的原因，我们可以将上面的3个链接（我为其分配了一个自定义的CSS类“ upper-controls”）更改为绝对定位。

CSS

/* 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%;
  }
}

结果

小提琴： https://jsfiddle.net/aq9Laaew/257205/