如何调整Reactstrap中元素的宽度？

Question

我想使用Reactstrap缩短输入元素的宽度，我该怎么做？

我尝试将bsSize设置为small，但仍然无法正常工作

    <InputGroup>
      <Input
        type="text"
        name="searchTxt"
        value={props.searchText}
        onChange={props.updateSearchText}
        placeholder="Type keyword here..."
        size="md"
        bsSize="small"
      ></Input>
      <Button
        color="secondary"
        onClick={() => props.getSearchResult(props.searchText)}
      >
        <MdSearch />
      </Button>
    </InputGroup>

这会占用导航栏中的所有剩余空间，我希望它只占用少量空间。

Answer 1

ReactStrap使用Bootstrap4。因此，我认为您可以使用固有的宽度实用程序，例如w-25，w-50或w-75。

Example of Bootstrap 4 width utilities