Html 如何在行中显示我的项目（使用php和bootstrap显示数据库中的所有项目）

我使用php将数据库中的最后五个事件显示为最近的事件。然而，当我希望将它们显示为3行而不是下一页时，引导和css使它们显示为一列

我尝试过使用css-flex:row；等，使其工作，但我不确定，如果引导是一团糟

我想在页面上显示三张卡片，然后在下一行显示第四张，等等。我已经尝试使用第n个孩子，但它无法将每一张卡片作为同一张卡片而不是不同的卡片来读取。我的代码有什么问题吗。任何帮助都将不胜感激

    <link href="css/recentevents.css" rel="stylesheet" type="text/css"/>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">


                    <?php


                    $result = mysqli_query($connection, "SELECT e.*,(SELECT COUNT(*) FROM user_events WHERE Event_ID = e.Event_ID) AS total_registrations FROM Events e ORDER BY Event_ID DESC LIMIT 0 , 5"); 

                     while($row = mysqli_fetch_array($result))
      {
                         $event = new Event($row);
                          $today = date("Y-m-d");   
                if($event->status == 'published' and $event->date >= $today){

    ?>

    <div class="container"> 
        <div class="row">
            <div class="col-lg-4"> 
                <div class="card"> 
                    <?php
                  echo'<img class="card-img-top" data-src=y=d ata-holder-rendered="true" width="600" src="data:image/jpg;base64,' . base64_encode( $row['event_image'] ) . '" />'

                      ?>
                    <div class="card-body">     
                        <h4 class="card-title"><?php echo $event->title?></h4>     
                        <p class="card-text"><?php echo $event->content?></p>
                        <a href="events_page.php" class="btn btn-primary">Sign Up</a>   </div> </div> </div>
        </div>
    </div>

      <?php
                }
           }
        ?>

CSS class
    .blank-section {
        margin-bottom: 15px;
        margin-top: 15PX;
    }
    .card {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid rgba(0,0,0,.125);
        border-radius: .25rem;
        margin-bottom: 15px;
    }

我想看到的是，这些卡片连续显示了大约三张，但它们只是不断地向下显示

它适用于以下代码它属于我网站的另一部分： 它适用于下面的代码段，但我需要它用于上面的代码段

$result = mysqli_query($connection,"SELECT * FROM feedback");
        while($row = mysqli_fetch_array($result))
  {
 echo "  <div class=\"reviews\">\n";
echo "  <div class=\"row blockquote review-item\">\n";
echo "   <div class=\"col-md-3 text-center\">\n";
echo "                    <img class=\"rounded-circle reviewer\" src=\"images/davidPic.png\">\n";
echo "                    <div class=\"caption\">\n";
echo "                        <small>By <a href=\"images/davidPic.png\"> David</a></small>\n";
echo "                        \n";
echo "                    </div>\n";
echo "                    \n";
echo "                </div>\n";
echo "                <div class=\"col-md-9\">\n";
echo "                    <h4>".$row['name']."</h4>\n";
echo "                    <p class=\"review-text\">".$row['feedback']." </p>\n";
echo "                    \n";
echo "                    <small class=\"review-date\"></small>\n";
echo "                </div>                          \n";
echo "            </div>  \n";
echo "        </div>\n";

---

我认为您需要更改每张卡使用的类别

您可以更改.col-lg-4而不是.col-lg-4

比如说,

见下例：

.空白部分{ 边缘底部：15px； 边缘顶部：15PX； } .卡片{ 位置：相对位置； 显示：-ms flexbox； 显示器：flex； -ms柔性方向：行； 弯曲方向：行； 最小宽度：0； 单词包装：打断单词； 背景色：fff； 背景剪辑：边框框； 边框：1px实心rgba0,0,0,125； 边界半径：.25rem； 边缘底部：15px； } 形象 标题

所容纳之物