React Bootstrap：如何用Rows和Cols实现Navbar搜索框与主体中间卡片对齐

想要让Navbar中的搜索框与页面主体的中间卡片（显示“create post”的区域）对齐，同时给Navbar实现三栏布局：

• 第一栏：Logo和导航项
• 第二栏（中间）：搜索框
• 第三栏：功能图标

尝试添加Rows和Cols后元素总是向左堆叠，无法实现理想布局，现有代码如下：

Navbar代码片段 #

<NavbarBs fixed="top" className="bg-white shadow-sm mb-3">
      <Container fluid>
        <NavbarBs.Brand href="#home">Logo</NavbarBs.Brand>
        <NavbarBs.Toggle aria-controls="basic-navbar-nav" />
        <NavbarBs.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">  
            <Nav.Link to="/" as={NavLink}>
              Home
            </Nav.Link>
            <Nav.Link to="/profile" as={NavLink}>
              Profile
            </Nav.Link>
          </Nav>
          <Nav>
            <Form>
              <Form.Group controlId="formBasicSearch" style={{width:"700px"}}>
                <Form.Control type="text" placeholder="Search" />       
              </Form.Group>
            </Form>
          </Nav>
          <Nav className="ms-auto">
            <Button variant="link">
              <BsFillBellFill
                size="1.4em"
                color="black"
              />
            </Button>
            <Button variant="link">
              <BsFillChatLeftDotsFill
                size="1.4em"
                color="black"
              />
            </Button>
            <Button variant="link">
              <BsFillGearFill
                size="1.4em"
                color="black"
              />
            </Button>
          </Nav>
          
        </NavbarBs.Collapse>
      </Container>
    </NavbarBs>

页面主体Grid代码 #

export const Home: React.FC<{}> = () => {
  return(
    <Container>
      <Row>
        <Col>
          <LeftCard />
        </Col>
        <Col className="col-sm-6">
          <CenterCard />
        </Col>
        <Col>
          <RightCard />
        </Col>
      </Row>
    </Container >
  )
}

问题出在没有正确利用Bootstrap的栅格系统分配Navbar内部元素宽度，且原代码中Container fluid会让Navbar宽度占满屏幕，和主体的普通Container宽度不一致，导致无法对齐。修改步骤如下：

1. 将Navbar中的Container fluid替换为普通Container，保证和主体容器宽度一致
2. 在NavbarBs.Collapse内部用Row和Col实现三栏布局，对应主体的列宽度
3. 移除搜索框的固定宽度，让它自适应所在列的宽度
4. 调整导航项和功能图标的对齐方式，保证布局美观

修改后的Navbar代码：

<NavbarBs fixed="top" className="bg-white shadow-sm mb-3">
  <Container> {/* 替换为普通Container，和主体对齐 */}
    <NavbarBs.Brand href="#home">Logo</NavbarBs.Brand>
    <NavbarBs.Toggle aria-controls="basic-navbar-nav" />
    <NavbarBs.Collapse id="basic-navbar-nav">
      <Row className="w-100 align-items-center"> {/* 用Row包裹，占满宽度，垂直居中元素 */}
        {/* 第一栏：Logo和导航项，对应主体左侧Col */}
        <Col>
          <Nav className="d-flex"> {/* d-flex保证导航项横向排列 */}
            <Nav.Link to="/" as={NavLink}>
              Home
            </Nav.Link>
            <Nav.Link to="/profile" as={NavLink}>
              Profile
            </Nav.Link>
          </Nav>
        </Col>

        {/* 第二栏：搜索框，对应主体中间col-sm-6 */}
        <Col className="col-sm-6">
          <Form className="w-100">
            <Form.Group controlId="formBasicSearch" className="mb-0">
              <Form.Control type="text" placeholder="Search" className="w-100" />
            </Form.Group>
          </Form>
        </Col>

        {/* 第三栏：功能图标，对应主体右侧Col */}
        <Col className="d-flex justify-content-end">
          <Nav className="d-flex">
            <Button variant="link">
              <BsFillBellFill size="1.4em" color="black" />
            </Button>
            <Button variant="link">
              <BsFillChatLeftDotsFill size="1.4em" color="black" />
            </Button>
            <Button variant="link">
              <BsFillGearFill size="1.4em" color="black" />
            </Button>
          </Nav>
        </Col>
      </Row>
    </NavbarBs.Collapse>
  </Container>
</NavbarBs>

• 用Row className="w-100 align-items-center"让内部三栏占满Navbar宽度，同时垂直居中元素
• 中间栏用col-sm-6和主体中间卡片的宽度完全匹配，实现对齐效果
• 移除搜索框的固定宽度，改用w-100让它占满所在列的宽度，适配不同屏幕尺寸
• 给导航和图标栏添加d-flex保证元素横向排列，第三栏用justify-content-end让图标靠右对齐

内容的提问来源于stack exchange，提问作者Sami Ahmad Khan