如何使用Bootstrap 5.3将导航栏居右？我的尝试未生效

你代码里用的ml-auto是Bootstrap 4的类，在Bootstrap 5中，margin-left的缩写已从ml-改为ms-（ms是margin-start的缩写，适配RTL布局），所以替换成ms-auto就能让导航菜单靠右对齐。

同时需要注意：Bootstrap 5里折叠按钮的属性也从data-toggle改成了data-bs-toggle，data-target改成了data-bs-target，这部分同步修改才能保证移动端折叠菜单正常触发。

修改后的完整代码：

<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
   <a class="navbar-brand" href="">Tindog</a>
   <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
          <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="">Download</a>
          </li>
      </ul>
   </div>
</nav>

如果需要让折叠容器内所有内容整体靠右，也可以给collapse navbar-collapse添加justify-content-end类，这种方式适合容器内没有其他需要左对齐的元素的场景。

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