React-Bootstrap中如何调整表单控件的宽度

Question

导航栏

除非我明确设置它的宽度，否则搜索栏的宽度不会改变，但这样做也会影响它在 window 尺寸较小时的外观。

我尝试使用只有 1 列的容器，但宽度仍然没有填满整行。

如何更改搜索栏的宽度？

导航栏：

    <Navbar style={{ position: 'sticky' }} bg="zocalo-blue" variant="dark" expand="lg" fixed="top">
        <Navbar.Brand className="mr-0">
            Test
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" size="sm"/>
        <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="justify-content-center flex-md-grow-1">
          <SearchBar />
        </Nav>
        <Nav className="ml-auto align-top">
          <CartIcon />
          <User />
        </Nav>
        </Navbar.Collapse>
    </Navbar>

搜索栏：

  <Form className="mb-0" inline>
      <Form.Group as={Row} controlId="search-materials">
        <InputGroup>
          <FormControl type="text" placeholder="Search" className="searchbar"/>
          <InputGroup.Append>
            <Button variant="zocalo-orange">
              <div>
                <i className="fa fa-search fa-lg"></i>
              </div>
            </Button>
          </InputGroup.Append>
        </InputGroup>
      </Form.Group>
  </Form>

Answer 1

您可以通过在其中提供样式来控制宽度。

<div style={{width:"100%"}}>
<Search/>
</div>