React-Bootstrap中如何将导航栏的About和Resume链接右对齐？

AI 小北

2026-6-21

方案一：使用Bootstrap的`ms-auto`类（最简单直接）

给<Nav>组件添加ms-auto类，利用flex布局的自动margin特性将导航项推到右侧：

const NavBar = () => {
  return (
    <Navbar className="bg-body-tertiary">
      <Navbar.Brand href="#home">Home</Navbar.Brand>
      <Nav className="ms-auto">
        <Nav.Link href="#About">About</Nav.Link>
        <Nav.Link href="#Resume">Resume</Nav.Link>
      </Nav>
    </Navbar>
  );
};

ms-auto是Bootstrap的间距工具类，作用是设置margin-left: auto（在从左到右的布局中）。由于Navbar本身是flex容器，这个类会让Nav组件自动占据左侧的剩余空间，从而被挤到屏幕右侧。

方案二：响应式场景下的两端对齐

如果你的导航需要在移动端折叠展开，可以结合Navbar.Collapse和justify-content-between类实现两端对齐：

const NavBar = () => {
  return (
    <Navbar className="bg-body-tertiary" expand="lg">
      <Navbar.Brand href="#home">Home</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav" className="justify-content-between">
        <div></div>
        <Nav>
          <Nav.Link href="#About">About</Nav.Link>
          <Nav.Link href="#Resume">Resume</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
};

justify-content-between会让Navbar.Collapse内的子元素分别对齐容器的左右两端，适合需要兼容移动端的导航布局。