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>

它适用于引导程序 5 Docs

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

2 个答案: