Reactjs 如何对齐同一行上的6张卡和3张卡

我现在有6张牌，我想在一行上对齐3张牌，这样我们总共有2行

我的密码在这里

---

有人可以过来寻求帮助吗？

您可以使用

flexbox

而不是

网格布局

来获得相同的结果

从“React”导入React；
导入“/styles.css”；
进口{
卡片
卡迪姆，
卡片文本，
名片夹，
名片，
卡尺
}从“反应带”；
常量css={
网格：{
显示：“flex”，
柔性包装：“包装”，
为内容辩护：“中心”
}
};
导出默认函数App（）{
常数数据=[
{
阿凡达：“https://placehold.it/269x200",
文本：“上次更新时间为1年前”，
标题：“3D”，
cardText:“web应用程序”
},
{
阿凡达：“https://placehold.it/269x200",
文本：“上次更新时间为4年前”，
标题：“3D”，
cardText:“web应用程序”
},
{
阿凡达：“https://placehold.it/269x200",
文本：“上次更新时间为6年前”，
标题：“3D”，
cardText:“web应用程序”
},
{
阿凡达：“https://placehold.it/269x200",
文本：“上次更新时间为1年前”，
标题：“3D”，
cardText:“web应用程序”
},
{
阿凡达：“https://placehold.it/269x200",
文本：“上次更新时间为4年前”，
标题：“3D”，
cardText:“web应用程序”
},
{
阿凡达：“https://placehold.it/269x200",
文本：“上次更新时间为6年前”，
标题：“3D”，
cardText:“web应用程序”
},
{
阿凡达：“https://placehold.it/269x200",
文本：“上次更新时间为4年前”，
标题：“3D”，
cardText:“web应用程序”
},
{
阿凡达：“https://placehold.it/269x200",
文本：“上次更新时间为6年前”，
标题：“3D”，
cardText:“web应用程序”
}
];
返回(
{data.map（{avatar，title，text，cardText}，index）=>(
{title}
{cardText}
{text}
))}
);
}

---

请查看此代码。我在bootstrap4中实现了这段代码

    <div class="container">
    <div class="row ">
        <h4>we can use "card-deck" for same height and "card-group" to remove margins and padding between cards</h4>
        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 m">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
</div>

我们可以使用相同高度的“卡片组”和“卡片组”来删除卡片之间的边距和填充
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分

结果:

---

这里不是问这种问题的地方。谢谢你的帮助。但是，我如何将本地文件夹中的图像检索到“avatar”而不是链接中？您可以将所需的图像保存在项目文件夹中，并提供这些图像的相对路径以代替avatar链接。我已经尝试过，但不起作用，您可以在此处查看吗？将您的图像保存到公用文件夹中，reactjs环境变量或其他东西似乎有问题，我们还必须从

index.js

工作示例中删除

：