Javascript 如何使反应带按钮响应？

如何使卡中包含的

反应带

当前行为，如您所见，卡片排序中的所有按钮都变成了一个大球：


或者，当我试图缩小窗口时，会发生以下情况：


当我使窗口变大或变小时，预期的行为将是一个更有序的布局，如下所示：


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-strip
这个伟大的工具。如果你深入到文档中，会发现一些关于如何处理卡片的有趣应用程序。
我想问题可能出在
.css
文件中。我没有任何特别的设置，因为我不知道这张卡是否会受到影响

也许我应该使用网格布局？还是我在往相反的方向走

请指向正确的方向。
试试这样的方法。当然，您需要使用网格：

<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>


项目说明
项目说明
项目说明
项目说明
项目说明
项目说明
项目说明
项目说明

文档：
也许可以尝试使用卡片中的网格？感谢阅读此问题。我该怎么做？你能提供一个例子，我可以在代码中集成吗？你也应该考虑按钮是否是一个类似的列表的正确UI。你考虑过使用文本链接吗？看见