时间戳

首页 > 解决方案 > 显示 3 张卡片后，如何在 php while 循环中创建换行符？

php - 显示 3 张卡片后，如何在 php while 循环中创建换行符？

问题描述

编码新手，想知道在显示 3 张卡片后如何换行。尝试了 flex 和 grid 但没有。目前我所有的卡片都只是从屏幕上推出。尝试了引导类和我自己的 css，什么都没有。谢谢

 include 'db_conn.php';
 $pic = mysqli_query($conn, "SELECT * FROM `users`");
 while($row = mysqli_fetch_array($pic)){
   echo "
   <div class='container'>
   <div class='row'>
     <div class='col'>
       <div class='card' style='width: 18rem;'>
         <img src='$row[image]' class='card-img-top' alt='Employee'>
         <div class='card-body'>
           <p class='card-text'>$row[first] $row[last]</p>
           <p class='card-text'>$row[position]</p>
           <p class='card-text'>$row[city]</p>
           <p class='card-text'>$row[state]</p>
           <button type='button' class='btn btn-primary'>Edit</button>
           <button type='button' class='btn btn-danger'>Delete</button>
         </div>
     </div>
     </div>
   ";
 }
 ?>

标签： phpflexboxgrid

解决方案

您可以使用引导行列来执行此操作。
只循环列，不循环整个容器。
这是引导文档https://getbootstrap.com/docs/5.0/layout/grid/#row-columns

<?php
 include 'db_conn.php';
 $pic = mysqli_query($conn, "SELECT * FROM `users`");
 echo "<div class='container'>
 <div class='row row-cols-3'>";
 while($row = mysqli_fetch_array($pic)){
   echo "
     <div class='col'>
       <div class='card' style='width: 18rem;'>
         <img src='$row[image]' class='card-img-top' alt='Employee'>
         <div class='card-body'>
           <p class='card-text'>$row[first] $row[last]</p>
           <p class='card-text'>$row[position]</p>
           <p class='card-text'>$row[city]</p>
           <p class='card-text'>$row[state]</p>
           <button type='button' class='btn btn-primary'>Edit</button>
           <button type='button' class='btn btn-danger'>Delete</button>
         </div>
   ";
 }
 echo "</div>
 </div>";
 ?>

推荐阅读