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

Question

How can I align my NavItem to right. I can only see it aligned to the left side. Any syntax errors ?

 <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

The problem is that you have <Nav> element wrapping another <Nav> elements. I think that <Nav> and <Nav.Item> is the same thing so why are you wrapping <Nav.items> into another <Nav> ?

Try this without this wrapper:

    <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

Try this and let me know

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

It works on bootstrap 5 Docs