如何調整寬度<input> Reactstrap 中的元素？

Question

我想使用 Reactstrap 縮短輸入元素的寬度，我該怎么做？

我嘗試將 bsSize 設置為小，但仍然無法正常工作

    <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 使用 Bootstrap 4。所以我認為您可以只使用固有的寬度實用程序，例如w-25 、 w-50或w-75 。

Bootstrap 4 寬度實用程序示例

如果這不能達到您喜歡的確切寬度，您始終可以使用自定義 CSS class 來指定寬度，或者更好地使用行和列將您的輸入放置在引導網格中。

使用 Row 和 Col 類的示例

Answer 2

首次導入

import {Button, Form, FormGroup, Label, Input, FormText, Col, Row, Card, CardBody, Table, CardHeader,
InputGroup, InputGroupAddon, InputGroupText,} from 'reactstrap';

將行添加到標記 FormGroup 示例

  <FormGroup row>
     <Col sm={2}></Col>
         <Col sm={8}>
               <InputGroup>
                   <Input type="select" name="select" id="selected">
                       <option>1. เลขที่บัตรประชาชน</option>
                       <option>2. ชื่อ</option>
                       <option>3. นามสกุล</option>
                       <option>4. ที่อยู่</option>
                       <option>5. คนที่ยังไม่จ่ายเงิน</option>
                   </Input>
                   <InputGroupAddon addonType="append">
                       <InputGroupText>@เลือกสิ่งที่จะค้นหา</InputGroupText>
                   </InputGroupAddon>
               </InputGroup>
         </Col>
     <Col sm={2}></Col>
  </FormGroup>

而這個結果