Как изменить ширину элемента <Input>в Reactstrap? - PullRequest
Новая
       16

Как изменить ширину элемента <Input>в Reactstrap?

0 голосов
/ 23 октября 2019

Я хочу уменьшить ширину входного элемента с помощью 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>

Это занимает все оставшееся место в Navbar, я хотел, чтобы он просто занимал небольшое количество места.

1 Ответ

0 голосов
/ 23 октября 2019

ReactStrap использует Bootstrap 4. Поэтому я думаю, что вы можете просто использовать встроенные утилиты ширины, такие как w-25, w-50 или w-75.

Пример утилит ширины Bootstrap 4

Если это не дает нужной вам ширины, вы всегда можете использовать любой класс CSS для указания шириныили, что еще лучше, поместите ваш ввод в сетку Bootstrap, используя строки и столбцы.

Примеры использования классов Row и Col *

...