React Bootstrap - 如何使用 Rows 和 Cols 将 Navbar 中的搜索框与主体的中心卡片对齐？

Question

我当前的页面是这样的：

我希望导航栏中的搜索框与正文中的中心卡片列（您看到创建帖子的位置）对齐。

这是我的导航栏的片段：

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

我的身体容器网格看起来像这样：

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

我希望我的 Navbar 有类似的 3 列

• Logo 和 Nav 项目的第一列
• 搜索的第二个（中间列）
• 最后一列是其他图标

我尝试添加行和列，但它们向左堆叠并且没有按照我希望的方式扩展到 3 个不同的列中。有人能告诉我我做错了什么以及如何实现吗？

Answer 1

由于我不熟悉您正在使用的语义组件，所以很难确切地知道要使用什么，但是如果您希望您的元素与主体对齐，只需确保导航栏使用完全相同的行/列布局；

<Nav className="me-auto"> 
    <Row>
      <Col>
        <Nav.Link to="/" as={NavLink}>
          Home
        </Nav.Link>
        <Nav.Link to="/profile" as={NavLink}>
          Profile
        </Nav.Link>   
      </Col>
      <Col>
        <Form>
          <Form.Group controlId="formBasicSearch" style={{width:"700px"}}>
            <Form.Control type="text" placeholder="Search" />       
          </Form.Group>
        </Form>
      </Col>
      <Col 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>
    </Col>
</Nav>