Bootstrap 4.5导航栏主内容居中、右侧折叠菜单实现求助

需求说明 #

需要实现导航栏左侧主内容区（包含My Recipes、iRecipe、Discover）响应式居中，同时右侧保留折叠的菜单区域（搜索、账户、登出图标）。此前移除导航栏元素时，使用.justify-content-center可让iRecipe区域居中，但添加导航栏及.justify-content-end类后布局不符合预期，不想通过创建假元素+space-between的方式实现，求Bootstrap 4.5的可行方案。

原代码 #

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<!-- Body -->
<nav class="navbar navbar-expand-lg">
  <ul class="navbar-nav">
    <li class="irecipe-navbar-heading">
      <a>My Recipes</a>
    </li>

    <li>
      <a class="irecipe-logo-navbar">iRecipe</a>
    </li>
    <li class="irecipe-navbar-heading">
      <a>Discover</a>
    </li>
  </ul>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler">
      <span class="navbar-toggler-icon"></span>
    </button>

  <div class="collapse navbar-collapse justify-content-end" id="navbarToggler">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#"></a><span class="material-symbols-outlined"> search </span>
      </li>
      <li class="nav-item">
        <a href="#"></a>
        <span class="material-symbols-outlined"> account_circle </span>
      </li>
      <li class="nav-item">
        <a href="#"></a><span (click)="logout()" class="material-icons"> login </span>
      </li>
    </ul>
  </div>
</nav>

解决方案 #

利用Bootstrap 4.5内置的flex布局间距类即可实现，无需额外假元素，具体调整如下：

• 给包含主内容的.navbar-nav添加mx-auto类，该类会给元素设置左右自动外边距，在flex容器（.navbar默认是flex布局）中，这个元素会自动占据剩余空间并居中，同时右侧的折叠区域自然靠右侧排列。
• 右侧折叠区域保持.justify-content-end，确保小屏幕下展开的菜单靠右对齐。

修改后的完整代码：

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<!-- Body -->
<nav class="navbar navbar-expand-lg">
  <ul class="navbar-nav mx-auto">
    <li class="irecipe-navbar-heading">
      <a>My Recipes</a>
    </li>

    <li>
      <a class="irecipe-logo-navbar">iRecipe</a>
    </li>
    <li class="irecipe-navbar-heading">
      <a>Discover</a>
    </li>
  </ul>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler">
      <span class="navbar-toggler-icon"></span>
    </button>

  <div class="collapse navbar-collapse justify-content-end" id="navbarToggler">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#"></a><span class="material-symbols-outlined"> search </span>
      </li>
      <li class="nav-item">
        <a href="#"></a>
        <span class="material-symbols-outlined"> account_circle </span>
      </li>
      <li class="nav-item">
        <a href="#"></a><span (click)="logout()" class="material-icons"> login </span>
      </li>
    </ul>
  </div>
</nav>

原理说明 #

• mx-auto是Bootstrap的间距工具类，对应CSS的margin-left: auto; margin-right: auto;，在flex容器中，这个属性会让元素在水平方向上自动居中，同时不影响其他元素的布局位置。
• 导航栏默认的flex布局会让子元素按顺序排列，主内容区添加mx-auto后，会自动把右侧的折叠区域挤到最右边，完美实现需求。

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