无法在 Bootstrap React 中将导航项目右对齐答案

【问题标题】：Cannot align Nav Items to right in Bootstrap React无法在 Bootstrap React 中将导航项目右对齐
【发布时间】：2021-09-13 09:44:54
【问题描述】：

如何将我的 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>

【问题讨论】：

标签： javascript reactjs bootstrap-4 react-redux

【解决方案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>

【讨论】：

【解决方案2】：

试试这个，让我知道

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

它适用于引导程序 5 Docs

【讨论】：