无法在 Bootstrap React 中将导航项向右对齐

Question

如何将我的 NavItem 向右对齐。 我只能看到它与左侧对齐。 任何语法错误？

 <Navbar style={{backgroundColor:'#071425'}} collapseOnSelect expand="lg"  variant="dark">
     <Nav className="justify-content-end" activeKey="/home">
        <Nav.Item>
          <Nav.Link href="/home">hello</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-1">Link</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-2">Link</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="disabled" disabled>
            Disabled
          </Nav.Link>
        </Nav.Item>
      </Nav>
    
          </Navbar>

Answer 1

问题是你有<Nav>元素包装另一个<Nav>元素。 我认为<Nav>和<Nav.Item>是一回事，所以你为什么<Nav.items>包装到另一个<Nav> ？

在没有这个包装器的情况下试试这个：

    <Navbar
      style={{ backgroundColor: "#071425" }}
      collapseOnSelect
      expand="lg"
      variant="dark"
     >
      <Nav.Item>
        <Nav.Link href="/home">hello</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey="link-1">Link</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey="link-2">Link</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey="disabled" disabled>
          Disabled
        </Nav.Link>
      </Nav.Item>
    </Navbar>

Answer 2

试试这个，让我知道

 <Nav className="ms-auto" activeKey="/home">
      //Your nav items
</Nav>

它适用于 bootstrap 5 Docs