在容器的第二行更改d-flex - React Js

Question

我是React JS的新手，我正在做一个React JS, bootstrap和Firebase的个人项目。我有一个组件ItemList用于创建容器，在容器内部有一个div用于创建行。

在行中我有一个data.map:

const ItemList = ({ data = []}) => {    
console.log(data)
return (
<>
<div className="container">
<div className="row d-flex text-center justify-content-center">
{data.map(i => <Item key={i.id} category={i.category} detail={i.detail} id={i.id}                      
img={i.img} name={i.name} price={i.price} stock={i.stock}  />)}
</div>
</div>
<p className='mt-5'></p>
</>
);
}

项目是好的，问题是如何出现:

输入图片描述

我需要独立于行(最好是4)中的项，第二行从左侧开始，而不是在中间。

我尝试不同的方法在容器内与d-flex和改变行中的flex，但不工作。

我认为在不使用容器和使用网格系统没有引导，但我不知道是否存在其他解决方案。

当我使用正常的左对齐时，我在右侧有一个空白空间，不允许居中视线。

输入图片描述

Answer 1

我需要独立于行中的项目(最好是4)

使用Bootstrap的行列类:row-cols-4。阅读文档了解更多信息。每个产品卡都需要一个父列<div class="col">..</div>才能工作。

你正在使用justify-content-center类定心所有的伸缩项目。你可以在Bootstrap文档中阅读。删除它以使用默认的Flexjustify-content: start;。