php - 在 Bootstrap Carousel 中使用 PHP 显示动态数据时的演示问题

Question

我正在为使用 PHP 从数据库中显示的网站主页创建动态事件日历。我还使用 Bootstrap 框架(版本 4.4.1)构建一个轮播，其中每个轮播元素一次显示 3 个即将发生的事件。

当从数据库中显示多个事件时，我的问题就出现了。检索到的数据垂直堆叠而不是水平堆叠。但是，如果我使用 HTML 在轮播中硬编码三个“事件”，则事件会以水平方式正确格式化。

我已经尝试了几种方法，但我仍在努力寻找解决方案，所以我将不胜感激任何帮助。

HTML/PHP:

   <!--CAROUSEL TEST --> 
   <!--Events panel-->
    <!-- Grid row-->
    <div class="row">

        <div id="eventsTitle" align="center" class="col-md-12">

              <h1>Events</h1>       

          </div>
    </div>    

<div class="container">
<div class="row">           
<div class="col-md-12">

<div id='carouselExampleControls' class='carousel slide' data-ride='carousel'>
<div class='carousel-inner'>
<div class='carousel-item active'>
  <div class='carousel-caption'>

    <!--Fetch and display events from database -->          
    <?php

    $query = "SELECT * FROM events ORDER BY eventDate LIMIT 3;";

        $result = mysqli_query($conn, $query);

        if (mysqli_num_rows($result) > 0) {

            while ($row = mysqli_fetch_assoc($result)) {

                $event = $row["eventName"];
                $date = $row["eventDate"];
                $time = $row["eventTime"];
                $loc = $row["eventPlace"];  
                $desc = $row["eventDesc"]; 

        echo " 
        <div class='row'>

        <div id='eventCard' align='center' class='col-md-4'>   

              <hr>

              <h1>$event</h1>
              <br>
              <p><i class='far fa-calendar-times'></i> $date
              <br>
              <i class='fas fa-map-marker-alt'></i> $loc
              <br>
              <i class='far fa-clock'></i> $time
              <br>
              <br>
              <a href='events.php'>More Info </a>
              </p>
              <hr>

          </div>

  </div>

      ";

             }
        }

    ?>

</div> <!--end CAROUSEL CAPTION -->


</div>  <!-- end CAROUSEL ACTIVE -->  

    <!-- SECOND CAROUSEL SLIDE --> 
    <div class='carousel-item'>
    <div class='carousel-caption'>

      <div class='row'>

          <div id='eventCard' align='center' class='col-md-4'>     
          </div>

          <div id='eventCard' align='center' class='col-md-4'>   
          </div>

          <div id='eventCard' align='center' class='col-md-4'>      
          </div>

  </div>


  </div>
</div>


  </div> <!--end CAROUSEL INNER -->


  <a class='carousel-control-prev' href='#carouselExampleControls' role='button' data-     slide='prev'>
   <span class='carousel-control-prev-icon' aria-hidden='true'></span>
   <span class='sr-only'>Previous</span>
  </a>
<a class='carousel-control-next' href='#carouselExampleControls' role='button' data-slide='next'>
   <span class='carousel-control-next-icon' aria-hidden='true'></span>
   <span class='sr-only'>Next</span>
  </a>
 </div> <!--end CAROUSEL CONTROLS -->

              <div id="eventButton" align="right" class="col-md-12">   

                <a class='button' href="events.php"><i class="fas fa-chevron-right"></i> MORE EVENTS</a>

            </div>

    </div> <!--end CAROUSEL COLS -->  
</div> <!--end CAROUSEL ROWS -->
</div> <!--end CAROUSEL CONTAINER-->




<!-- // end CAROUSEL TEST -->  

CSS:

#eventCard  {

padding: 3em;

}

/*TEST CAROUSEL */

body{
background-color: #fff;
}
.carousel{
margin-top: 0px;
}
.carousel-inner{
height: 350px;
}
.carousel-caption{
color: #242424;
top: 50%;
}

事件数据的 HTML 硬编码所需结果的图像示例:

使用 PHP 从数据库中检索数据时的结果图像示例:

Answer 1

在您的 PHP 循环中，您有 <div class='row'>添加到那里所以它将添加 3 次，因此它出现在彼此下面。也许试试下面的方法。

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
    <div class="carousel-item active">
    <!--Fetch and display events from database -->          
<?php

$query = "SELECT * FROM events ORDER BY eventDate LIMIT 3;";

    $result = mysqli_query($conn, $query);

    if (mysqli_num_rows($result) > 0) {

        while ($row = mysqli_fetch_assoc($result)) {

            $event = $row["eventName"];
            $date = $row["eventDate"];
            $time = $row["eventTime"];
            $loc = $row["eventPlace"];  
            $desc = $row["eventDesc"]; 

                            echo "<div align='center' class='col-md-4'>   
                                <hr>

                                <h1>$event</h1>
                                <br>
                                <p><i class='far fa-calendar-times'></i> $date
                                <br>
                                <i class='fas fa-map-marker-alt'></i> $loc
                                <br>
                                <i class='far fa-clock'></i> $time
                                <br>
                                <br>
                                <a href='events.php'>More Info </a>
                                </p>
                                <hr>
                            </div>";
         }
    }

?>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>