React-Bootstrap导航栏布局问题：如何让社交媒体图标右移且Logo与页面选项居中

我使用React及react-bootstrap组件开发导航栏，需求为：Logo与页面选项（Updates、Careers）居中显示，社交媒体图标（LinkedIn、Reddit、Twitter）居右显示。但对社交媒体导航组件添加justify-content-end类、自定义CSS样式等调整均未生效，图标始终停留在中心位置。

当前代码 #

<Navbar expand="lg" className="py-3">
  <Container>
    <Navbar.Brand href="/src/">
      <img
        src="/assets/Logo.png"
        width="60"
        height="60"
        className="d-inline-block align-top"
        alt="Nexus Devops"
      />
    </Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="me-auto text-center">
        <Nav.Link id='nav' href="/roadmap/">Updates</Nav.Link>
        <Nav.Link id='nav' href="/careers/">Careers</Nav.Link>
      </Nav>
      <Nav className=" ms-auto social-media-icons navbar-right">
        <Nav.Link href="#"><i className="fab fa-linkedin-in"></i></Nav.Link>
        <Nav.Link href="#"><i className="fab fa-reddit-alien"></i></Nav.Link>
        <Nav.Link href="#"><i className="fa-brands fa-twitter"></i></Nav.Link>
      </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>

尝试过的CSS样式 #

.social-media-icons {
  margin-left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
}

当前效果 #

期望效果 #

解决方案 #

问题核心是Navbar.Collapse未占据容器全部宽度，导致ms-auto等flex布局类无法生效；同时原结构中Logo与页面选项不在同一居中容器内，无法实现整体居中需求。

代码修改方案（适配响应式）：

<Navbar expand="lg" className="py-3">
  <Container className="d-flex align-items-center">
    {/* 小屏幕下单独显示Logo */}
    <Navbar.Brand href="/src/" className="d-lg-none">
      <img
        src="/assets/Logo.png"
        width="60"
        height="60"
        className="d-inline-block align-top"
        alt="Nexus Devops"
      />
    </Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav" className="w-100 d-lg-flex justify-content-center align-items-center">
      {/* 大屏幕下Logo与页面选项组合居中 */}
      <div className="d-none d-lg-flex align-items-center">
        <Navbar.Brand href="/src/">
          <img
            src="/assets/Logo.png"
            width="60"
            height="60"
            className="d-inline-block align-top"
            alt="Nexus Devops"
          />
        </Navbar.Brand>
        <Nav className="ms-4 text-center">
          <Nav.Link id='nav' href="/roadmap/">Updates</Nav.Link>
          <Nav.Link id='nav' href="/careers/">Careers</Nav.Link>
        </Nav>
      </div>
      {/* 小屏幕下单独显示页面选项 */}
      <Nav className="d-lg-none text-center w-100">
        <Nav.Link id='nav' href="/roadmap/">Updates</Nav.Link>
        <Nav.Link id='nav' href="/careers/">Careers</Nav.Link>
      </Nav>
      {/* 社交媒体图标自动居右 */}
      <Nav className="ms-auto">
        <Nav.Link href="#"><i className="fab fa-linkedin-in"></i></Nav.Link>
        <Nav.Link href="#"><i className="fab fa-reddit-alien"></i></Nav.Link>
        <Nav.Link href="#"><i className="fa-brands fa-twitter"></i></Nav.Link>
      </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>

关键调整说明：

1. 给Container添加d-flex align-items-center，确保导航元素垂直对齐；
2. 给Navbar.Collapse添加w-100使其占据容器全部宽度，大屏幕下用justify-content-center让内部内容居中；
3. 将Logo与页面选项放入同一容器，实现二者整体居中；
4. 用d-lg-none/d-none d-lg-flex控制元素在不同屏幕尺寸下的显示；
5. 给社交媒体导航添加ms-auto，利用flex布局特性自动将其推至最右侧，无需额外自定义CSS。

简化版（无需区分小屏幕Logo显示）：

如果不需要小屏幕单独显示Logo，可直接将Logo移入Collapse简化代码：

<Navbar expand="lg" className="py-3">
  <Container>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav" className="w-100 d-lg-flex justify-content-center align-items-center">
      <div className="d-flex align-items-center">
        <Navbar.Brand href="/src/">
          <img
            src="/assets/Logo.png"
            width="60"
            height="60"
            className="d-inline-block align-top"
            alt="Nexus Devops"
          />
        </Navbar.Brand>
        <Nav className="ms-4 text-center">
          <Nav.Link id='nav' href="/roadmap/">Updates</Nav.Link>
          <Nav.Link id='nav' href="/careers/">Careers</Nav.Link>
        </Nav>
      </div>
      <Nav className="ms-auto">
        <Nav.Link href="#"><i className="fab fa-linkedin-in"></i></Nav.Link>
        <Nav.Link href="#"><i className="fab fa-reddit-alien"></i></Nav.Link>
        <Nav.Link href="#"><i className="fa-brands fa-twitter"></i></Nav.Link>
      </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>

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