Bootstrap 4 NavBar，带有 2 行和可折叠的居中徽标答案

【问题标题】：Boostrap4 NavBar with 2 rows and centered logo collapsibleBootstrap 4 NavBar，带有 2 行和可折叠的居中徽标
【发布时间】：2018-10-26 17:19:12
【问题描述】：

我希望 2 行导航栏看起来像这样

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

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

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

<html>
<div class="header" style="margin-bottom:0">
           <a class="logo" href="#default">CompanyLogo</a>
           <div class="header-right">
           <a href="#countryicon">country</a>
           <a href="#lang">language</a>
           <a href="#signup">
           <img border="0" alt="signup" src="Sign up icon png.png" width="30" 
            height="30">
           </a>
           <a href="#signin">
           <img border="0" alt="signup" src="Sign in icon png.png" width="30" 
             height="30">
           </a>
           </div>
        </div>

        <nav class="nav navbar">
         <ul class="nav justify-content-center">
           <li class="nav-item">
               <a class="nav-link" href="#">Categories</a>
           </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>
        </nav>
        </html>

【问题讨论】：

我认为您的意思是“行”而不是“列”。您的示例有两行，每行 4 列和 6 列。
这可能也有帮助：stackoverflow.com/questions/49780918/…

标签： html css bootstrap-4

【解决方案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 类“上控制”）更改为绝对定位，原因与我们在上面的按钮切换器上所做的相同。

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/

【讨论】：