如何在 react-bootstrap 中创建搜索栏

Question

 I want that when the header expands to large size, the search bar should be replaced with a search icon and it should be displayed on the header, not in the toggle menu bar.

这里是代码：

从“react-bootstrap/Button”导入按钮；

从“react-bootstrap/Container”导入容器；

从“react-bootstrap/Form”导入表单；

从“react-bootstrap/Nav”导入 Nav；

从“react-bootstrap/Navbar”导入导航栏；

从“react-bootstrap/NavDropdown”导入 NavDropdown；

函数 NavScrollExample() {

返回（

<Navbar bg="light" expand="lg">

  <Container fluid>

    <Navbar.Brand href="#">Navbar scroll</Navbar.Brand>

    <Navbar.Toggle aria-controls="navbarScroll" />

    <Navbar.Collapse id="navbarScroll">

      <Nav

        className="me-auto my-2 my-lg-0"

        style={{ maxHeight: '100px' }}

        navbarScroll

      >

        <Nav.Link href="#action1">Home</Nav.Link>

        <Nav.Link href="#action2">Link</Nav.Link>

        <NavDropdown title="Link" id="navbarScrollingDropdown">

          <NavDropdown.Item href="#action3">Action</NavDropdown.Item>

          <NavDropdown.Item href="#action4">

            Another action

          </NavDropdown.Item>

          <NavDropdown.Divider />

          <NavDropdown.Item href="#action5">

            Something else here

          </NavDropdown.Item>

        </NavDropdown>

        <Nav.Link href="#" disabled>

          Link

        </Nav.Link>

      </Nav>

      <Form className="d-flex">

        <Form.Control

          type="search"

          placeholder="Search"

          className="me-2"

          aria-label="Search"

        />

        <Button variant="outline-success">Search</Button>

      </Form>

    </Navbar.Collapse>

  </Container>

</Navbar>

);

}

导出默认值

导航滚动示例；