将项目映射到网格上

Question

我有一个对象数组。每个对象包含3个图像、一个名称和详细信息。我试图将这些对象映射到引导卡上，但每张卡都在一条单独的线上渲染。我希望这些卡片形成一个网格。一行3张牌，其余牌在下一行。

const data = [
nikeItem1,
nikeItem2,
adidasItem1,
adidasItem2,
reebokItem1,
reebokItem2,
uaItem1,
uaItem2,
];
{data.map((item, i) => {
const img = item ? item.img1 : null;
const heading = item ? item.name : null;
const desc = item ? item.detail : null;
return (
<div className="card " style={{ width: "18rem" }}>
<img src={img} className="card-img-top" />
<div className="card-body">
<h5 className="card-title">{heading}</h5>
<p className="card-text">{desc}</p>
</div>
</div>
);
})}

一切都需要从引导程序创建。

Answer 1

使用一行作为主容器className=row，然后在其内部，添加另一个带有className="col-4"的div，然后在其中添加卡片

行>Col-4>卡片

演示访问：https://codepen.io/theredcap/pen/GRZoGQQ

我对React了解不多，但这就是使用Bootstrap的方法，考虑到您正在返回html，这应该可以工作。