React-Bootstrap 2.5.0：如何调整Navbar.Brand与Navbar.Toggle的布局？

React-Bootstrap的Navbar内部Container默认采用justify-content-between布局，所以Navbar.Toggle和Navbar.Brand会分别居左、居右。下面针对你的需求给出两种可行方案：

方案1：让Navbar.Brand居中（Toggle保持左侧） #

给Navbar.Brand添加mx-auto类，利用自动左右margin实现居中，同时保留Toggle在左侧的位置：

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

如果需要仅在md及以上屏幕生效（对应你的expand="md"配置），可以改用mx-auto-md类。

方案2：让Navbar.Brand左对齐（紧跟Toggle右侧） #

修改Container的对齐方式，添加justify-content-start类，让内部元素全部靠左排列：

<Navbar
        key="md"
        collapseOnSelect
        className="sm md"
        expand="md"
        bg="dark"
        variant="dark">
  <Container fluid className="d-flex align-items-center justify-content-start">
          <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>

同样，若需仅在md及以上屏幕生效，可替换为justify-content-start-md类。

内容的提问来源于stack exchange，提问作者usagibear