时间戳

首页 > 解决方案 > 确定逻辑以在 bootsrap 中水平分解卡片

php - 确定逻辑以在 bootsrap 中水平分解卡片

问题描述

我有以下一段代码，它实质上是在从数据库中获取一些值后动态创建引导 4 卡。然而，问题是每个新条目都会水平堆叠，我正在努力编写一段逻辑来告诉 html 一旦超过 3 张卡片就换行以堆叠卡片。这是我到目前为止所拥有的，非常感谢一些指导

<div class="row row-container">
<?php foreach ($data as $row) : ?>

<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">
<?php echo $row->title?></h5>
<p class="card-text"><?php echo $row->ID?></p>
<a href="#" class="btn btn-primary">View</a>
</div>
</div>
</div>

<?php endforeach; ?>

</div>

我的初始代码运行良好，除了它保持水平堆叠新元素的事实。基本上要打破一个新行，我需要一个新行，<div class="row row-container">这是我目前无法想到的如何获取。

我尝试添加如下逻辑，该逻辑将使用计数变量检查项目数是否可被 3 整除（如果是，它应该打破一个新行）但我不知道如何继续

<div class="row row-container">
        <?php $count=0; ?>
            <?php foreach ($data as $row) : ?>
            <?php

                $count++
                ?>

            <?php
            if (($count % 3) ==0 ){
                echo "<div class="row row-container">";
            }

                echo "$count" ?>
            <div class="col">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title"><?php echo $row->title ?></h5>
                    <p class="card-text"><?php echo $row->description ?></p>
                    <a href="#" class="btn btn-primary">View </a>
                </div>
            </div>
            </div>

            <?php endforeach; ?>

        </div>

标签： phphtmlcssbootstrap-4

解决方案

有不同的方法可以做到这一点，但如果唯一的目的是确保每 4 列进入一个新行，我会用它array_chunk来实现这一点：

<?php foreach (array_chunk($data, 3) as $row) : ?>
<div class="row row-container">
    <?php foreach ($row as $col) : ?>
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">
                <?php echo $col->title?></h5>
                <p class="card-text"><?php echo $col->ID?></p>
                <a href="#" class="btn btn-primary">View</a>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>
<?php endforeach; ?>

这是一个现场演示供您快速参考。

该array_chunk函数将数组分成更小的块。更多细节可在php.net获得。

推荐阅读