【发布时间】: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>
我的初始代码运行良好,除了它保持水平堆叠新元素。基本上要打破一个新行,我需要一个新行<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>
【问题讨论】:
标签: php html css bootstrap-4