Javascript 我应该如何设计卡片的样式，以便每行可以有3张卡片？

使用数组的map方法，我正在创建迭代容器中状态的卡组件。我想把卡片垂直排列成一行，每行只有3张卡片

这是ContentCard功能组件：

从“React”导入React；
从“/../../../Assets/CardLogo.PNG”导入CardLogo；
从“reactstrap”导入{Card，CardMg，CardText，CardBody，CardTitle，CardSubtitle，Button}；
从“/ContentCard.module.css”导入类；
const contentCard=props=>(
{props.title}
从…起₹{props.price}
通常450-400字，一本电子书非常适合你的目标读者，包括
潜在客户对用户
命令
);
导出默认内容卡；

这是ContentCards父组件，它重用ContentCard组件。在这个组件中迭代状态之后，我应该如何对得到的卡片进行样式设置，以便像我上面所说的那样排列它们

import React，{Component}来自“React”；
从“/ContentCards.module.css”导入类；
从“/ContentCard/ContentCard”导入ContentCard；
类ContentCards扩展组件{
状态={
内容：[
{标题：“博客/文章”，价格：“500”}，
{标题：“时事通讯/电子邮件”，价格：“1000”}，
{标题：“白皮书”，价格：“2000”}，
{标题：“电子书”，价格：“1000”}，
{标题：“报告指南”，价格：“1000”}，
{标题：“产品说明”，价格：“500”}，
{标题：“网站内容”，价格：“1000”}，
{标题：“视频脚本”，价格：“1000”}，
{标题：“公司简介/手册”，价格：“2000”}，
{标题：“新闻实现”，价格：“2000”}
]
};
render（）{
让card=this.state.content.map（cnt=>(
));
返回{card}；
}
}
导出默认内容卡；

您可以使用reactstrap的Col和Row组件：

由于引导使用12列系统，为了在行中显示3列，我将sm设置为4

我制作了这个沙盒，以整页大小，它一行显示3张卡片

---

因为我没有类和徽标，所以我将它们排除在外。

使用

行

类作为容器，然后将

col-4

类分配给每个孩子

{
this.state.content.map（cnt=>(
));
}