如何在中建立链接<navbar>使用 react-boostrap 向右浮动</navbar>

Question

我希望嵌套在第一个 Nav 标签内的所有元素都位于 NavBar 的左侧，而第二个 Nav 标签中的所有元素都向右浮动。 如何使用 React Bootstrap 实现此目的？

我尝试在第二个 Nav 标签上执行 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">

内嵌 styles 的示例：

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