Bootstrap 5导航栏列表内容右移失效？ml-auto等方法均无效如何解决

失效原因说明 #

Bootstrap 5 为适配RTL（从右到左）语言布局，重构了间距类命名规则：原基于left/right的ml-*、mr-*类已被废弃，替换为基于start/end的ms-*、me-*类。其中ml-auto对应Bootstrap 5中的ms-auto（从左到右布局下等价于margin-left: auto），这是旧方法失效的核心原因。

其他尝试方法失效原因：

• float-end对flex布局下的元素不生效，Bootstrap导航栏默认采用flex布局
• d-flex justify-content-end未添加到正确的容器层级，无法作用于导航菜单列表

解决方案 #

方案1（推荐） #

给导航菜单列表标签添加ms-auto类即可，仅需修改一行代码：
将原代码中的
<ul class="navbar-nav">
修改为
<ul class="navbar-nav ms-auto">

方案2 #

也可通过给折叠容器添加对齐类实现，将原代码中的
<div class="collapse navbar-collapse" id="navbarNav">
修改为
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">

修改后完整代码 #

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">EXS</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Examenes</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Iniciar sesión</a>
        </li>
        <li>
          <a class=" btn btn-warning btn-sm my-1 text-light px-3" href="#">Regístrate</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

内容的提问来源于stack exchange，提问作者Kevin Jafet Morán Orozco