如何在Bootstrap 4中居中导航栏Logo并将导航链接置于其下方

这问题其实就是调整Bootstrap 4的flex布局属性就行，不用复杂的自定义CSS，用自带的类就能搞定。核心思路是把导航栏的flex方向从默认的横向改成纵向，然后让所有元素水平居中。

直接上修改后的代码，你可以对照自己的代码调整：

<nav class="navbar navbar-light bg-light flex-column align-items-center">
  <!-- Logo部分，mb-3用来增加和下方链接的间距 -->
  <a class="navbar-brand mb-3" href="#"><img src="img/h-tech-logo-crop..." alt="H-Tech Logo"></a>
  
  <!-- 导航链接容器 -->
  <div class="navbar-collapse w-100" id="navbarNav">
    <ul class="navbar-nav justify-content-center w-100">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <!-- 其他导航项继续加在这里 -->
    </ul>
  </div>
</nav>

关键改动说明： #

• flex-column：给navbar添加这个类，把默认的横向flex布局改成纵向，这样Logo和导航链接会自动各占一行，实现"Logo单独占一行"的需求。
• align-items-center：让navbar内部的所有元素（Logo和导航容器）在水平方向居中对齐。
• mb-3：给Logo添加这个margin类，让它和下方的导航链接保持合适的间距，视觉上更舒服。
• w-100 + justify-content-center：给导航容器和导航列表添加这两个类，确保导航链接在整个宽度内水平居中排列，不会靠左或者靠右。

如果你的项目里原本有navbar-expand-lg类，记得把它去掉——因为这个类会让大屏设备下导航栏回到横向布局，破坏我们想要的垂直排列效果。如果需要在大屏时保持垂直布局，上面的代码就完全够用了。

内容的提问来源于stack exchange，提问作者c.gooderham94