使用phpforeach循环引导4张卡

Question

我正试图让我的网页在bootstrap 4卡中显示我的所有商店商品。3宽多少深(我可能会在另一天添加分页(

我有一个php foreach循环，它完美地填充bootstrap4卡。问题是它们垂直显示(一个在另一个的顶部(。我尝试了class＝columns，它适用于伪div，但当我与for each循环集成时就不行了。

我已经尝试了所有关于引导文档的东西，但无法让卡片显示3宽和多深(foreach和项目控制这一点。(

我应该使用"卡片"还是使用其他东西。thx为您的时间

<div class="container">

<!-- $result = my php code using x-path to get results from xml query goes here. -->
<?php 
foreach ( $result as $elements){
?>

<div class="row-fluid ">
<div class="col-sm-4 ">
<div class="card-columns-fluid">
<div class="card  bg-light" style = "width: 22rem; " >
<img class="card-img-top"  src=" <?php echo $elements->pictures->picture[2]->filename  ; ?> " alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b><?php echo $elements->advert_heading ?></b></h5>
<p class="card-text"><b><?php echo $elements->price_text ?></b></p>
<p class="card-text"><?php echo $elements->bullet1 ?></p>
<p class="card-text"><?php echo $elements->bullet2 ?></p>
<a href="#" class="btn btn-secondary">Full Details</a>
</div></div></div></div>
<?php
}
}
?>
</div> 
</div> <!--container close div  -->

Answer 1

如前所述，.row流体应在回路外：

<div class="container">
<div class="row-fluid ">
<!-- my php code which uses x-path to get results from xml query. -->
<?php foreach ( $result as $elements) : ?>
<div class="col-sm-4 ">
<div class="card-columns-fluid">
<div class="card  bg-light" style = "width: 22rem; " >
<img class="card-img-top"  src=" <?php echo $elements->pictures->picture[2]->filename  ; ?> " alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b><?php echo $elements->advert_heading ?></b></h5>
<p class="card-text"><b><?php echo $elements->price_text ?></b></p>
<p class="card-text"><?php echo $elements->bullet1 ?></p>
<p class="card-text"><?php echo $elements->bullet2 ?></p>
<a href="#" class="btn btn-secondary">Full Details</a>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div> <!--container div  -->

Answer 2

您需要将<div class="row-fluid ">类移动到foreach循环之外，否则它将为每个类创建一个新行。

此外，正如一条评论所提到的，您需要正确地关闭所有div。