Bootstrap 4导航栏多行项目垂直居中问题咨询

我完全懂你遇到的困扰——当导航栏里某个项变成多行（比如你的用户信息加了余额），其他单行的导航项就跑到顶部去了，没法和多行项保持垂直居中对齐。咱们一步步来搞定这个问题：

问题重现 #

先看你正常单行状态的导航栏代码：

<div class="collapse navbar-collapse" id="navbarSupportedContent"> 
  <ul class="navbar-nav ml-auto"> 
    <li class="nav-item"> 
      <a class="nav-link" href="#">FAQ</a> 
    </li> 
    <li class="nav-item"> 
      <a class="nav-link profile" href="#"> 
        <div class="profile-info"> 
          <span class="name">Артём</span> 
        </div> 
      </a> 
    </li> 
  </ul> 
</div>

但当你给用户信息加上余额，变成多行结构后：

<div class="collapse navbar-collapse" id="navbarSupportedContent"> 
  <ul class="navbar-nav ml-auto"> 
    <li class="nav-item"> 
      <a class="nav-link" href="#">FAQ</a> 
    </li> 
    <li class="nav-item"> 
      <a class="nav-link profile" href="#"> 
        <div class="profile-info"> 
          <span class="name">Артём</span> 
          <span class="balance">31337 ₽</span> 
        </div> 
      </a> 
    </li> 
  </ul> 
</div>

你的Sass样式代码如下：

#site-header { 
  background: #2d3840; 
  border-bottom: solid 1px #20272d; 
  height: 83px; 

  .navbar-brand { 
    color: white; 
  } 

  .nav-item { 
    &:not(:first-child) { margin-left: 25px; } 
    &:not(:last-child) { margin-right: 25px; } 

    // General link 
    a.nav-link { 
      color: white; 
      font-size: 16px; 
      text-align: center; 
      @include transition(0.5s); 

      &:hover { 
        @include transition(0.3s); 
        color: $color-accent; 
      } 

      &.active { 
        padding: 6px 21px 6px 21px; 
        background: $color-accent; 
        border-radius: 17.5px; 
        box-shadow: 0 2px 10px 0 rgba(90, 175, 238, 0.6); 

        &:hover { 
          color: white; 
          box-shadow: none; 
        } 
      } 

      // Profile 
      &.profile { 
        .profile-info { 
          display: inline-block; 

          .name { 
            display: block; 
            font-weight: bold; 
          } 

          .balance { 
            display: block; 
            font-size: 16px; 
            font-weight: bold; 
            color: $color-accent; 
          } 
        } 
      } 
    } 
  } 
}

解决方案 #

问题核心是Bootstrap的.nav-item默认没有设置垂直对齐规则，当其中一个项高度变高，其他项会默认顶部对齐。我们只需要给导航项加上垂直居中的flex属性就行，有两种简单的实现方式：

方法1：利用Bootstrap内置flex类（最快）

直接给整个.navbar-nav添加align-items-center类，一次性让所有导航项内部垂直居中：

<ul class="navbar-nav ml-auto align-items-center">

或者单独给每个<li class="nav-item">加上d-flex align-items-center类，效果是一样的：

<li class="nav-item d-flex align-items-center"> 
  <a class="nav-link" href="#">FAQ</a> 
</li>

方法2：修改Sass样式（无需改动HTML）

如果不想调整HTML结构，就在你的Sass代码里给.nav-item添加flex垂直居中的样式：

#site-header {
  // ... 保留原有样式
  .nav-item {
    &:not(:first-child) { margin-left: 25px; }
    &:not(:last-child) { margin-right: 25px; }
    // 添加以下两行，让导航项内部元素垂直居中
    display: flex;
    align-items: center;

    // ... 保留原有.nav-link相关样式
  }
}

修改完成后，不管导航项是单行还是多行，所有元素都会保持垂直居中对齐，达到你想要的效果：

原理说明 #

Bootstrap的.navbar-nav本身是flex容器，但.nav-item默认是块级元素，当内部内容高度不一致时，块级元素会默认顶部对齐。把.nav-item设置为flex容器并添加align-items: center，就能强制让它内部的.nav-link始终垂直居中，不受内容高度影响。

内容的提问来源于stack exchange，提问作者artem