twitter-bootstrap - 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>

并按以下顺序呈现：

但我希望布局是这样的：

我尝试使用弹性订单，但我无法以简单的方式解决...

标签： twitter-bootstrapbootstrap-4bootstrap-5

Answer 1

基本上有2个选项。

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>

演示