Как отобразить мои элементы подряд (используя php и bootstrap для отображения всех элементов из базы данных)

Question

Я использую php для отображения последних пяти событий из моей базы данных как самые последние события.Однако при загрузке вместе с css они отображаются в виде столбца, когда я хочу, чтобы они отображались в строке 3 вместо перехода по странице.

Я попытался использовать 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";

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>