bootstrap 4 张带有 php foreach 循环的卡片

Question

我正在尝试让我的网页在 bootstrap 4 张卡片中显示我所有的商店商品。 3 宽多少深（我可能改天添加分页）

我有一个 php foreach 循环，可以完美填充 bootstrap4 张卡片。问题是它们垂直显示（一个在另一个之上）。我试过 class= 列，它适用于虚拟 div，但当我与我的 for each 循环集成时却不行。

我已经尝试了有关 bootstrap 文档的所有内容，但无法让卡片显示 3 宽和多深（foreach 和项目控制它。）

我应该使用 'cards' 还是使用其他东西。谢谢你的时间

    <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

您需要将 <div class="row-fluid "> class 移到 foreach 循环之外，否则它将为每个 class.

创建一个新行

此外，如评论所述，您需要正确关闭所有 div。

Answer 2

如前所述，.row-fluid 应该在循环之外：

<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  -->

bootstrap 4 张带有 php foreach 循环的卡片

bootstrap 4 cards with php foreach loop

css

php

foreach

display