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

Question

我有一个关于 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>

然后按以下顺序呈现：

但我希望布局是这样的：

我试过弹性订单，但我不能用简单的方法解决...

Answer 1

基本上有2个选项。

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

      <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

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

Bootstrap - columns mapping (similar to row-cols-*)

twitter-bootstrap

bootstrap-4

bootstrap-5