如何在 Reactstrap 中调整 <Input> 元素的宽度？答案

【问题标题】：How do I resize the width of <Input> element in Reactstrap?如何在 Reactstrap 中调整 <Input> 元素的宽度？
【发布时间】：2021-04-14 21:00:15
【问题描述】：

我想使用 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>

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

【问题讨论】：

标签： javascript reactjs reactstrap

【解决方案1】：

ReactStrap 使用 Bootstrap 4。所以我认为您可以只使用固有的宽度实用程序，例如 w-25、w-50 或 w-75。

Example of Bootstrap 4 width utilities

如果这不能达到您喜欢的确切宽度，您始终可以使用自定义 CSS 类来指定宽度，或者更好地使用行和列将您的输入放置在引导网格中。

Examples of using the Row and Col classes

【讨论】：

它对我有用，代码示例：<Input className="w-25" type="text" placeholder="Enter Name" />

【解决方案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>

这个结果

【讨论】：