我的当前页面看起来像这样：Page screenshot
我希望在导航栏中的搜索框是在与中心卡在身体列对齐（在那里你看到创建后）。
下面是我的导航栏的片段：

<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>

我的body容器Grid看起来像这样：

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

我希望我的导航栏有类似的3列

• 徽标和导航项的第一列
• 第二个（中间列）用于搜索
• 和最后一列中的其他图标

我试着添加行和列，但它们向左堆叠，并且没有按照我想要的方式扩展到3个不同的列。有人能告诉我我做错了什么，以及如何做到这一点？