如何使用 <NavBar> react-boostrap 在浮动中制作链接

Question

我希望所有嵌套在第一个Nav标签内的元素都在导航条的左侧，所有在第二个Nav标签中的元素都在右边浮动。我如何使用react Bootstrap实现这一点?

我试着做Nav className="float-right"在第二个导航标签上，但它不起作用。我也试过className="ml-auto"

<Nav>
<Nav.Link>
{" "}
<Link
to="/booklets"
className="nav-link"
onClick={() => setExpanded(false)}
>
Booklets
</Link>
</Nav.Link>
<Nav.Link>
{" "}
<Link
to="/form"
className="nav-link"
onClick={() => setExpanded(false)}
>
Upload New Booklet
</Link>
</Nav.Link>
<Nav.Link>
{" "}
<Link
to="/about"
className="nav-link"
onClick={() => setExpanded(false)}
>
About
</Link>
</Nav.Link>
</Nav>
<Nav>
<Nav.Link>
{" "}
<Link
to="/login"
className="nav-link"
onClick={() => {
setExpanded(false);
currentUser && logout();
}}
>
{currentUser ? "Logout" : "Login"}
</Link>
</Nav.Link>
<Nav.Link>
{" "}
<Link
to="/register"
className="nav-link"
onClick={() => setExpanded(false)}
>
{!currentUser ? "Register" : ""}
</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>

Answer 1

假设两个<Nav>的直接父元素是<Navbar.Collapse>，也许可以尝试样式父元素，让它将项目分别放在一侧，使用flex显示。

Bootstrap类的例子:

<Navbar.Collapse className="d-flex justify-content-between">

内联样式示例:

<Navbar.Collapse style={{ display: 'flex', justifyContent: 'space-between' }}>