将项目映射到网格

问题描述

我有一个对象数组。每个对象包含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>
        );
      })}

需要从引导程序中创建所有内容。

解决方法

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

行> Col-4>卡

有关演示访问，请访问：https://codepen.io/theredcap/pen/GRZoGQQ

我对React不太了解，但这是您使用Bootstrap的方式，考虑到返回的html，它应该可以工作。