Php 将引导4行更改为卡片或卡片组
使引导卡的配置正常工作时遇到一些问题。原始模板配置为每行和每列中的节1项。我想把它做成看起来像polariods的卡片,但坚持使用Bootstrap4来保持干净 原始模板(我删除了一些代码以缩短问题!)Php 将引导4行更改为卡片或卡片组,php,html,css,mysqli,bootstrap-4,Php,Html,Css,Mysqli,Bootstrap 4,使引导卡的配置正常工作时遇到一些问题。原始模板配置为每行和每列中的节1项。我想把它做成看起来像polariods的卡片,但坚持使用Bootstrap4来保持干净 原始模板(我删除了一些代码以缩短问题!) : : : : : 你的结构应该是这样的: <div class="container"> <div class="card-deck text-center"> <?php
:
:
:
:
:
你的结构应该是这样的:
<div class="container">
<div class="card-deck text-center">
<?php
for ($i = 0, $x = count($this->rows); $i < $x; $i++) {
$row = $this->rows[$i];
$buyer = $userHelper->getUser($row->publisher_userid);
?>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card mb-4">
<img class="card-img-top img-fluid" src="<?= $row['image']?>" alt="Card image cap">
<div class="card-body" style="height: 20rem">
<h4 class="card-title"><?= $row['title']?></h4>
<p class="card-text"><?= $row['desc']?></p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
“alt=”卡图像上限“>
上次更新是在3分钟前
这是一个适合我的结构
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
(php here)
<div class="col mb-5">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
</h5>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
(这里是php)
一旦列被指定,卡就会进入列中
干杯感谢您的建议:在php标记之前开始,如上所述,会破坏容器,不会创建类似RGD的卡片组
<div class="container">
<div class="card-deck text-center">
<?php
for ($i = 0, $x = count($this->rows); $i < $x; $i++) {
$row = $this->rows[$i];
$buyer = $userHelper->getUser($row->publisher_userid);
?>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card mb-4">
<img class="card-img-top img-fluid" src="<?= $row['image']?>" alt="Card image cap">
<div class="card-body" style="height: 20rem">
<h4 class="card-title"><?= $row['title']?></h4>
<p class="card-text"><?= $row['desc']?></p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
(php here)
<div class="col mb-5">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
</h5>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>