如何使用React Bootstrap实现导航栏（NavBar）部分链接右对齐

要让第一个<Nav>左对齐，第二个<Nav>右对齐，你需要利用Bootstrap的flex布局工具，之前的float-right和ml-auto无效是因为类名适配问题或者没有正确利用flex容器特性。

解决方案 #

给第二个<Nav>添加ms-auto类（Bootstrap 5中替代了旧版的ml-auto），这个类会在flex容器中自动将元素推到最右侧。

修改后的完整代码片段：

<Navbar.Collapse>
  <Nav>
    <Nav.Link>
      {" "}
      <Link
        to="/booklets"
        className="nav-link"
        onClick={() => setExpanded(false)}
      >
        Booklets
      </Link>
    </Nav.Link>
    <Nav.Link>
      {" "}
      <Link
        to="/form"
        className="nav-link"
        onClick={() => setExpanded(false)}
      >
        Upload New Booklet
      </Link>
    </Nav.Link>
    <Nav.Link>
      {" "}
      <Link
        to="/about"
        className="nav-link"
        onClick={() => setExpanded(false)}
      >
        About
      </Link>
    </Nav.Link>
  </Nav>
  {/* 为第二个Nav添加ms-auto类实现右对齐 */}
  <Nav className="ms-auto">
    <Nav.Link>
      {" "}
      <Link
        to="/login"
        className="nav-link"
        onClick={() => {
          setExpanded(false);
          currentUser && logout();
        }}
      >
        {currentUser ? "Logout" : "Login"}
      </Link>
    </Nav.Link>
    <Nav.Link>
      {" "}
      <Link
        to="/register"
        className="nav-link"
        onClick={() => setExpanded(false)}
      >
        {!currentUser ? "Register" : ""}
      </Link>
    </Nav.Link>
  </Nav>
</Navbar.Collapse>
</Navbar>

关键说明 #

• Bootstrap 5中，ml-auto（margin-left:auto）已被ms-auto（margin-start:auto）取代，更适配RTL布局场景。
• <Navbar.Collapse>默认是flex容器，因此ms-auto能正确生效，将第二个Nav组件推至导航栏右侧。
• 避免使用float-right：Bootstrap的Navbar基于flex布局实现，float类在flex容器内不会产生预期的对齐效果。

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