如何调整宽度<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>

而这个结果