使用Bootstrap实现导航栏右对齐时ml-auto失效如何解决？

问题根因 #

• 栅格列宽占满：行内两列均设置为col-md-6，合计宽度刚好占满12列的栅格行，无剩余空间供ml-auto生效，因此给第二列加ml-auto不会产生右移效果。
• 小屏宽度限制：第二列设置了col-3，小屏下仅占25%宽度，狭窄的容器无法提供足够空间让导航内容右对齐。
• 多余嵌套限制：行列拆分的额外嵌套限制了导航容器的可用宽度，即使导航内部加了ml-auto也无法达到预期效果。

修复代码 #

你可以直接简化头部布局，用flex替代冗余的栅格拆分，实现左侧标题、右侧导航的对齐效果：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<header class="bg-info text-white d-flex align-items-center px-3 px-md-5 py-3">
  <h2>Header</h2>
  <nav class="navbar navbar-expand-lg navbar-light ml-auto p-0">
    <button class="navbar-toggler ml-auto border-white" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active text-white" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Know More</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Actions</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Contact Us</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

关键修改说明 #

• 移除了冗余的row、col嵌套，给头部设置d-flex弹性布局，直接给导航加ml-auto即可实现右对齐
• 修正了Bootstrap4的折叠菜单触发属性，将data-bs-toggle、data-bs-target改为data-toggle、data-target，适配当前引入的Bootstrap4版本
• 移除了导航容器的宽度限制，导航可根据内容自适应宽度，对齐效果正常生效

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