循环中列div之间的间距

Question

我正在使用引导程序，并且使用foreach循环来显示产品。结果如下所示。我想增加“ D”框，以使与“ B”框的距离增加，如虚线所示。基本上，第四个单元格D应该与第三个单元格C垂直对齐，而第二个单元格B则水平对齐。

结果：

脚本：

<?php foreach ($produk as $p) : ?>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2">
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-body">
                <button class="btn btn-sm btn-link p-0"><i class="material-icons md-18">favorite_outline</i></button>
                
                <figure class="product-image"><img src="<?php echo base_url(); ?>assets/img/<?php echo $p['gambar'] ?>" alt="" class=""></figure>
                <a href="product-details.html" class="text-dark mb-1 mt-2 h6 d-block"><?php echo $p['nama_menu'] ?></a>
                <p class="text-secondary small mb-2"><?php echo $p['nama_resto'] ?></p>
                <h5 class="text-success font-weight-normal mb-0">Rp <?php echo substr($p['harga'], 0, -3) ?><sup>.<?php echo substr($p['harga'], -3) ?></sup></h5>
                <p class="text-secondary small text-mute mb-0"> </p>
                <button class="btn btn-default button-rounded-36 shadow-sm float-bottom-right"><i class="material-icons md-18">shopping_cart</i></button>
            </div>
        </div>
    </div>
<?php endforeach; ?>

Answer 1

在bootstrap 4中，您可以使用flex属性来实现所需的功能。

https://getbootstrap.com/docs/4.1/utilities/flex/

只需将它们放在弯曲行中，然后使用正确的flex属性使它们最大生长即可。