React.js中如何将Navbar.Brand logo居中放置在导航菜单项上方

• 我是Stack Overflow新用户，同时也是React.js初学者，非常感谢大家提供的帮助。
• 我已尝试通过CSS文件修改Navbar样式调整布局方向，但并未达到理想效果。

当前实现效果：品牌logo与导航菜单项在同一水平行排列
目标布局效果：品牌logo整体居中，位于导航菜单项的正上方

现有组件代码如下：

function NavBar() {
  const [expand, updateExpanded] = useState(false);
  const [navColour, updateNavbar] = useState(false);

  function scrollHandler() {
    if (window.scrollY >= 20) {
      updateNavbar(true);
    } else {
      updateNavbar(false);
    }
  }

  window.addEventListener("scroll", scrollHandler);

  return (
    <Navbar
      expanded={expand}
      fixed="top"
      expand="md"
      className={navColour ? "sticky" : "navbar"}
    >
      <Container>
        <Navbar.Brand href="/" className="d-flex">
           <img src={logo} className="img-fluid logo" alt="brand" />
        </Navbar.Brand>
        <Navbar.Toggle
          aria-controls="responsive-navbar-nav"
          onClick={() => {
            updateExpanded(expand ? false : "expanded");
          }}
        >
          <span></span>
          <span></span>
          <span></span>
        </Navbar.Toggle>
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="mx-auto" defaultActiveKey="#home">
            <Nav.Item>
              <Nav.Link as={Link} to="/" onClick={() => updateExpanded(false)}>
                <AiOutlineHome style={{ marginBottom: "2px" }} /> Home
              </Nav.Link>
            </Nav.Item>

            <Nav.Item>
              <Nav.Link
                as={Link}
                to="/about"
                onClick={() => updateExpanded(false)}
              >
                <AiTwotoneEye style={{ marginBottom: "2px" }} /> The Story
              </Nav.Link>
            </Nav.Item>

            <Nav.Item>
              <Nav.Link
                as={Link}
                to="/project"
                onClick={() => updateExpanded(false)}
              >
                <FaFlask
                  style={{ marginBottom: "2px" }}
                />{" "}
                The Lab
              </Nav.Link>
            </Nav.Item>

            <Nav.Item>
              <Nav.Link
                href="placeholder.com"
                target="_blank"
                rel="noreferrer"
              >
                <AiOutlineTrophy style={{ marginBottom: "2px" }} />  How To Join
              </Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link
                href="placeholder.com"
                target="_blank"
                rel="noreferrer"
              >
                <FaDiceFive style={{ marginBottom: "2px" }} /> More
              </Nav.Link>
            </Nav.Item>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

解决方法 #

React Bootstrap的Navbar默认在md及以上尺寸断点采用横向flex布局，所以logo和导航菜单会默认并排显示，只需要调整容器的flex方向，不需要改动现有业务逻辑就能实现目标效果：

1. 添加自定义CSS样式 #

把下面的代码加到你的全局CSS文件里，核心是把导航容器改成纵向排列，同时适配小屏折叠状态的布局：

/* 大屏下导航容器纵向排列，内容居中 */
.navbar .container {
  flex-direction: column;
  align-items: center;
}
/* 去掉logo默认右侧边距，加底部间距和菜单隔开 */
.navbar .navbar-brand {
  margin-right: 0;
  margin-bottom: 0.6rem;
}
/* 导航项居中对齐 */
.navbar .navbar-nav {
  align-items: center;
}

/* 小屏（md断点以下）恢复横向排列，避免汉堡按钮错位 */
@media (max-width: 767.98px) {
  .navbar .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .navbar .navbar-brand {
    margin-bottom: 0;
  }
}

注意：你之前给导航加的mx-auto类在纵向布局下依然生效，不需要额外删除或修改。

2. 可选优化 #

如果需要调整logo和菜单之间的间距，直接修改.navbar-brand的margin-bottom数值即可；如果要调整导航项之间的间距，给.nav-item加左右内边距就行。

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