使用 php foreach 循環引導 4 張卡片

Question

我試圖讓我的網頁在 bootstrap 4 卡中顯示我的所有商店商品。 3 寬多深（我可能會在另一天添加分頁）

我有一個 php foreach 循環，它可以完美地填充 bootstrap4 卡。 問題是它們垂直顯示（一個在另一個頂部）。 我試過 class= 列在虛擬 div 上工作，但當我與我的每個循環集成時卻沒有。

我已經嘗試了有關引導程序文檔的所有內容，但無法讓卡片顯示 3 寬和多深（foreach 和項目控制這一點。）

我應該使用“卡片”還是使用其他東西。 謝謝你的時間

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

Answer 2

您需要將<div class="row-fluid ">類移到 foreach 循環之外，否則它將為每個類創建一個新行。

此外，正如評論所提到的，您需要正確關閉所有 div。