如何在Bootstrap 5中将两个导航栏元素置于右侧？

问题出在你对ms-auto的使用方式上——它需要作用在独立的导航容器上，而非包裹链接的普通div。原结构中所有导航链接都在同一个.navbar-nav（flex容器）内，内部元素加margin-auto无法触发flex布局的自动对齐逻辑。

正确的实现方式：

• 把「Log In」「Sign Up」从原.navbar-nav中拆分出来，放到一个新的.navbar-nav容器里
• 给这个新容器添加ms-auto类，借助Bootstrap的margin工具类实现靠右对齐

修改后的完整代码：

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <nav class="navbar navbar-dark bg-dark navbar-expand-sm">
    <a class="navbar-brand" href="">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarPractice" aria-controls="navbarPractice" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarPractice">
      <!-- 左侧导航链接 -->
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="">Home</a>
        <a class="nav-link" href="">About</a>
        <a class="nav-link" href="">Support</a>
      </div>
      <!-- 右侧登录注册链接，ms-auto实现靠右 -->
      <div class="navbar-nav ms-auto">
        <a class="nav-link" href="">Log In</a>
        <a class="nav-link" href="">Sign Up</a>
      </div>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

原理说明：.collapse.navbar-collapse本身是flex布局容器，ms-auto会让第二个.navbar-nav容器的左侧margin自动填充剩余空间，从而被推到导航栏的最右侧。这种方式完全遵循Bootstrap 5的布局规范，同时适配移动端折叠后的导航菜单显示。

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