【问题标题】:Determining logic to break down cards horizontally in bootsrap确定逻辑以在引导程序中水平分解卡片
【发布时间】:2020-11-11 18:33:13
【问题描述】:

我有以下一段代码,它实质上是在从数据库中获取一些值后动态创建引导 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>

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

我尝试添加如下逻辑,该逻辑将使用计数变量检查项目数是否可被 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>

【问题讨论】:

    标签: php html css bootstrap-4


    【解决方案1】:

    有不同的方法可以做到这一点,但如果唯一的目的是确保每 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; ?>
    

    这里有一个live demo 供您快速参考。

    array_chunk 函数将数组分成更小的块。更多详情请访问php.net

    【讨论】:

    • 哇,难以置信!这里有很多东西要学,谢谢你解释清楚的答案@Matt
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-02
    • 2020-11-09
    • 1970-01-01
    • 2021-08-09
    • 2015-10-21
    相关资源
    最近更新 更多