Как сделать реагирующий ремень на кнопку отзывчивым?

Question

Как мне сделать react-strap кнопку , ограниченную в Карте, отзывчивой?

Текущее поведение , поскольку все кнопки в сортировке карт становятся большой шар:

Или когда я пытаюсь сделать окно меньше, вот что происходит:

Ожидаемое поведение будет более организованным макетом, когда я увеличу или уменьшу окно, как показано ниже:

Belwo код, который я использую:

                        </CardText>
                        <div class="btn-toolbar">
                            <Button className="btn mr-3">Project Notes</Button>
                            <Button className="btn mr-3">Abstract</Button>
                            <Button className="btn mr-3">Location Map</Button>
                            <Button className="btn mr-3">Distances and Contours</Button>

                            <Button className="btn mr-3">Borrow Area Info</Button>
                            <Button className="btn mr-3">Solicitation</Button>
                            <Button className="btn mr-3">Specifications</Button>
                            <Button className="btn mr-3">Amendments</Button>
                            <Button className="btn mr-3">Plans</Button>
                        </div>
                    </CardBody>
                </Card>

То, что я сделал до сих пор:

Я провел много исследований, поскольку только начал использовать замечательный инструмент react-strap. И если вы go внутри документации, есть несколько интересных приложений о том, как обращаться с картами. Я думаю, что проблема может быть в файле .css. У меня нет никаких настроек, в частности для этого, потому что я не знаю, может ли быть затронута карта.

Может быть, я должен использовать сетку? Или я иду в противоположном направлении?

Пожалуйста, укажите правильное направление.

Answer 1

Попробуйте что-нибудь подобное. Конечно, вам нужно поиграться с сеткой:

<CardBody>
    <Row>
      <Col>
         <Button >Project Notes</Button>
      </Col>
      <Col>
         <Button >Project Notes</Button>
      </Col>
      <Col>
         <Button >Project Notes</Button>
      </Col>
      <Col>
         <Button >Project Notes</Button>
      </Col>

    </Row>
    <Row style={{marginTop:'20px'}}>
      <Col>
         <Button >Project Notes</Button>
      </Col>
      <Col>
         <Button >Project Notes</Button>
      </Col>
      <Col>
         <Button >Project Notes</Button>
      </Col>
      <Col>
         <Button >Project Notes</Button>
      </Col>

    </Row>

</CardBody>

Документы: https://reactstrap.github.io/components/layout/