html - 我如何连续显示我的元素(使用 php 和 bootstrap 显示数据库中的所有元素)

Question

我正在使用 php 将数据库中的最后五个事件显示为最近的事件。但是，当我希望它们连续显示 3 个而不是向下显示页面时， Bootstrap 和 css 使它们显示为一列。

我试过使用 css flex: row;等让它工作，但我不确定 Bootstrap 是否把它搞砸了。

我希望在整个页面上显示三张卡片，然后在下一行显示第四张卡片，等等。我已经尝试使用第 n 个 child ，但它不起作用，因为它将每一张卡片都当作同一张卡片而不是不同的卡片来读取。有没有办法解决这个问题或我的代码有什么问题。任何帮助将不胜感激。

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

Answer 1

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

而不是 .col-lg-4 ，你可以改变它.col-sm-4

例如，<div class="col-sm-4">

参见下面的示例:

.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;
}

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

<div class="container">
    <div class="row">
   <?php 
      $result = <your query>; 

      while($row = mysqli_fetch_array($result))
        {
                         $event = new Event($row);
                          $today = date("Y-m-d");   
                if($event->status == 'published' and $event->date >= $today){
               // output
      ?>
        <div class="col-sm-4">
            <div class="card">
                image
                <div class="card-body">
                    <h4 class="card-title">
                        title
                    </h4>
                    <p class="card-text">
                        content
                    </p>
                    <a href="events_page.php" class="btn btn-primary">Sign Up</a> </div>
            </div>
        </div>
    </div>
    <?php
    }
    ?>
</div>