Bootstrap - 列映射（类似于 row-cols-*）答案

<div className="row row-cols-3"> {array.map((item) => ( <div className="col" key={item.id}> <div class="card" style={{ width: "12rem", height: "12rem" }}> <div class="card-body"> {item.name} </div> </div> </div> ))} </div>

【解决方案1】：

基本上有两种选择。

1 - 使用 flex-column 并将 flexbox 容器 (row) 的高度限制为大约两倍的列高度。这是假设您想要 2 行。如果您想要 3 行，则将高度增加三倍，四行将高度增加四倍，等等。

      <div className="row row-cols-3 flex-column" style={{ height: "26rem" }}>
              {array.map((item) => (
                <div className="col d-flex justify-content-center py-2" key={item}>
                 <div className="card" style={{ width: "12rem", height: "12rem" }}> 
                    <div className="card-body">
                      {item} 
                    </div> 
                   </div>
                </div>
              ))}
      </div>

2 - 使用 card-columns（仅限 Bootstrap 4）而不是网格。 CSS 多列布局自然地从上到下而不是从左到右。

       <div className="card-columns mx-auto">
              {array.map((item) => (
                <div className="card" key={item} style={{ width: "12rem", height: "12rem" }}>
                    <div className="card-body">
                      {item} 
                    </div> 
                </div>
              ))}
       </div>

Demo

【讨论】：

谢谢！第一种方法有效！您是否认为没有对高度进行硬编码的其他解决方案？无论如何，非常感谢！
是的，我认为这是唯一的方法