Bootstrap 4导航栏：将nav元素移至navbar-brand下方及登录按钮右对齐问题

我明白你想要的布局效果：在中等及以上屏幕上，navbar-brand居中显示，导航菜单（Users、Products）在品牌下方，而Login/Logout按钮要靠导航区域的右侧。你遇到的mr-auto无效的问题，主要是因为Bootstrap 4的flex布局特性和当前navbar的结构设置不对。

下面是调整后的完整解决方案：

修改思路 #

• 改变navbar在中等屏幕以上的flex方向为column，让品牌和导航内容垂直排列
• 利用flex布局让品牌自然居中，替代原来的绝对定位（更符合Bootstrap的设计思路）
• 给登录按钮所在的ul添加ml-auto（而非mr-auto），让它在flex容器里自动靠左填充空间，从而实现靠右对齐

调整后的HTML代码 #

<nav class="navbar navbar-expand-sm navbar-dark bg-dark custom-navbar">
  <a href="#" class="navbar-brand">Academind</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarMenu">
    <!-- 导航菜单 -->
    <ul class="navbar-nav mb-2 mb-sm-0">
      <li class="nav-item">
        <a href="#" class="nav-link">Users</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Products</a>
      </li>
    </ul>
    <!-- 登录/退出按钮 -->
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a href="#" class="nav-link">Login</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Log out</a>
      </li>
    </ul>
  </div>
</nav>

调整后的CSS代码 #

@media (min-width: 768px) {
  .custom-navbar {
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  .navbar-collapse {
    width: 100%;
    justify-content: center;
  }
}

代码说明 #

• 给navbar添加custom-navbar类，方便自定义中等屏幕以上的样式
• 媒体查询中，把navbar的flex方向改为column，并设置align-items: center让品牌居中，同时调整上下内边距优化布局
• navbar-collapse设置宽度100%和justify-content: center，让导航菜单默认居中，登录按钮的ul通过ml-auto实现靠右
• 给导航菜单的ul添加mb-2 mb-sm-0，在小屏幕折叠时增加底部间距，优化移动端体验

这样调整后，就能完美实现你想要的布局效果：品牌居中，导航在下方，登录按钮靠右，同时保持移动端的折叠菜单功能正常。

内容的提问来源于stack exchange，提问作者SIn san sun