Bootstrap 5导航栏使用ms、me类设置对齐未达预期问题咨询

• 边距自动类使用错误：你给元素一、二所属的列表加了ms-auto（左外边距自动），给元素三、四所属的列表加了me-auto（右外边距自动），两个自动边距会把两组导航链接挤在导航栏中间区域，最终呈现所有元素居中的效果。
• 结构冗余：navbar-brand不需要嵌套在navbar-nav容器内，navbar-nav是专门用于导航链接列表的样式类。
• 缺少宽度容器：导航栏内没有包裹宽度容器，无法提供足够的剩余空间供自动边距生效。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a href="#" class="navbar-brand">Company Name</a>

    <ul class="navbar-nav">
      <li><a class="nav-link" href="#">Element one</a></li>
      <li><a class="nav-link" href="#">Element two</a></li>
    </ul>

    <ul class="navbar-nav ms-auto">
      <li><a class="nav-link" href="#">Element three</a></li>
      <li><a class="nav-link" href="#">Element four</a></li>
    </ul>
  </div>
</nav>

• 新增container-fluid作为导航栏的直接子元素，确保导航内容占满整个导航栏宽度，为自动边距提供足够的剩余空间。
• 移除包裹navbar-brand的冗余navbar-nav容器，直接放置品牌标识即可。
• 把ms-auto调整到元素三、四所属的列表上：在常规从左到右的书写环境下，ms-auto等价于margin-left: auto，会自动填充元素左侧的所有剩余空间，把当前元素推到父容器最右侧，刚好满足元素三、四右对齐的需求。
• 如果你只需要在lg及以上屏幕尺寸下保留这个对齐效果，可以把ms-auto替换为ms-lg-auto，适配折叠态导航栏的表现。

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