如何从上到下拆分2列数据？

Question

我有一个关于在Bootstrap中从上到下显示2列数据的方法的问题。我的数据在一个数组中，所以我用foreach循环它。

在附加的图片上，你可以看到我打算以垂直然后水平的方式排列我的两列，所以项目的前半部分应该在左列，后半部分在右列。

这段代码

<div class="container bg-grey pt-4 pb-4">
<h4 class="text-secondary">Buy</h4>
<div class="row">
    <div class="col-6 col-lg-6 col-xs-6 col-md-6 col-sm-6">
        <div class="row">
            <?php foreach ($product as $k => $v) : ?>
            <div class="col-12 pr-1">
                <div class="swiper-slide mb-2" style="height: unset">
                    <div class="card border-0" style="width: 18rem;">
                        <img class="card-img-top rounded-0"
                             src="himg/products/j01l.jpg"
                             alt="Card image cap">
                        <div class="card-body p-2 text-left">
                            <h6><span class="badge badge-danger">Low</span></h6>
                            <h6 class="card-title mb-0"><?= $v['txt'] ?></h6>
                            <p class="card-text"><small style="line-height: 90%"><?= $v['desc'] ?></small></p>
                            <h5 class="text-danger mb-0"><?= number_format($v['price']) ?></h5>
                            <p class="small"><small class="text-secondary">
                                    <del>60</del>
                                </small> -10%
                            </p>
                            <a href="#" class="btn mt-2 btn-block btn-primary">Check</a>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach;  ?>
        </div>
    </div>
</div>

​

​

​

Answer 1

您可以使用css's column-count属性，查看以下示例，根据需要进行调整。

​

.card-container {
  column-count: 2;
}
.card {
  margin-bottom: 1rem;
  break-inside: avoid-column;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container bg-grey pt-4 pb-4">
  <h4 class="text-secondary">Buy</h4>
  <div class="row">
      <div class="col-12 col-lg-8">
          <div class="card-container">
        
        <div class="card">
          <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title 1</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        
        
        <div class="card" >
          <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title 2</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        
                
        <div class="card">
          <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
          <div class="card-body">
          <h5 class="card-title">Card title 3</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        
        
        <div class="card">
          <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
          <div class="card-body">
          <h5 class="card-title">Card title 4 </h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        
        <div class="card">
          <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
          <div class="card-body">
          <h5 class="card-title">Card title 5</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        
        
        
         </div>
      </div>
  </div>
</div>

​

Answer 2

如果$product是0索引数组，则：

for ($index = 0; $index < count($product) / 2; $index++) {
    //Display a row, your left item is $product[$index]
    //and your right item is $product($index + ((int)count($product)) / 2)
    //the right item is missing if $index + ((int)count($product)) / 2 >= count($product)
    //So, if the comparison above is true, then you need to have a missing item
    //otherwise display the item having the given index
}

如果$product不是0索引数组，则可以将其转换为1：

$indexedProduct = [];
foreach($product as $k => $v) {
    $indexedProduct[]=$v;
}