在 React-Bootstrap 2.5.0 中有没有办法将 Navbar.Brand 放在 Navbar.Toggle 旁边？

Question

目前，我有以下内容，其中 Navbar.Toggle 位于左侧，我的 Navbar.Brand 位于最右侧。 由于我的切换从左侧打开一个画布，我希望切换按钮位于左侧。 但是，我希望我的 Navbar.Brand 居中或左对齐。 我是 react-bootstrap 的新手，所以为这个愚蠢的问题道歉。

这是当前代码：

<Navbar
        key="md"
        collapseOnSelect
        className="sm md"
        expand="md"
        bg="dark"
        variant="dark">
  <Container fluid>
          <Navbar.Toggle aria-controls="offcanvasNavbarLabel-expand-md" />
          <Navbar.Brand href="#home">
            <img
              alt=""
              src={Logo}
              width="30"
              height="30"
              className="d-inline-block align-top"
            />
            My App
          </Navbar.Brand>
  </Container>
</Navbar>

我尝试将以下className值添加到 Navbar.Brand 和NavBar但没有得到我想要的：

• justify-content-center-md
• justify-content-center

Answer 1

您要么想要justify-content-start （用于品牌左对齐），要么添加一个空的第三个元素并使用justify-content-between （用于居中对齐）。 这可能是容器上的 go，而不是导航栏。

https://getbootstrap.com/docs/5.2/utilities/flex/#justify-content