如何使反應帶按鈕響應？

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這個很棒的工具時，我一直在做很多研究。 如果你進入文檔，有幾個關於如何處理卡片的有趣應用程序。 我認為問題可能出在.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/