ReactJS中实现Bootstrap卡片从页面中心向外渲染的方法

我在使用ReactJS开发时，通过遍历数组为每个对象生成Bootstrap卡片，当前卡片默认从屏幕最左侧开始渲染，从左到右依次排列，每行排满5个卡片后自动创建新行。
目前卡片排满5个后自动换行的展示效果符合预期，但当卡片数量少于5个时，卡片仍从最左侧开始排布，我希望实现如下效果：

• 仅存在1张卡片时，卡片在屏幕中心位置展示
• 随着卡片数量增加，卡片从中心位置向外逐步填充排布

卡片行核心代码 #

<div className='row mt-lg-3 row-cols-xs-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-5 g-4'>
    {viewElements.map((element) => (
          <ElementItem key={element._id} element={element} />
    ))}
</div>

现有效果（5张卡片满行状态） #

期望效果（少量卡片居中排布参考） #

完整业务代码 #

<section className='mt-3'>
        {viewElements ? (
          <div className='row mt-lg-3 row-cols-xs-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-5 g-4'>
            {viewElements.map((element) => (
              <ElementItem key={element._id} element={element} />
            ))}
          </div>
        ) : (
          <div className='container mt-5'>
            <div className='content mt-5'>
              <div className='row'>
                <div className='row'>
                  <h3>No Elements To Display</h3>
                </div>
              </div>
            </div>
          </div>
        )}
</section>

这个效果完全可以实现，且不需要改动现有响应式列数、自动换行的逻辑，仅使用Bootstrap原生类即可完成：

1. 给卡片所在的row容器添加justify-content-center类。Bootstrap的row默认是flex布局，该类会让子元素沿主轴居中排列：当行内卡片不满一行时，会自动从中心向两侧对称排布；当卡片满5个时，会自动撑满整行，和你现有的满行展示效果完全一致，不会产生冲突。
2. 如果你的ElementItem组件根元素没有自带Bootstrap的col类，建议给每个循环项包裹一层col容器，同时给col加d-flex justify-content-center，保证卡片在列内始终居中，适配xs/sm/md/lg/xl各断点下的列数切换规则。

修改后的核心代码如下：

<div className='row mt-lg-3 row-cols-xs-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-5 g-4 justify-content-center'>
    {viewElements.map((element) => (
      <div className="col d-flex justify-content-center" key={element._id}>
        <ElementItem element={element} />
      </div>
    ))}
</div>

如果你使用的是Bootstrap 5+版本，且ElementItem根元素已经添加了对应col类，不需要包裹额外div，直接给row添加justify-content-center即可实现目标效果：1张卡片居中，2-4张卡片从中心向外对称排布，满5张自动换行且和原有展示效果完全一致。

内容的提问来源于stack exchange，提问作者Chris MacIsaac