Проблема презентации при отображении данных Dynami c с использованием PHP внутри Bootstrap Карусели

Question

Я создаю динамический календарь событий c для домашней страницы веб-сайта, который отображается из базы данных с использованием 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

Выведите код html из php эха. Некоторое время это случается и со мной. По какой-то причине это работает. попробуйте вот так

CSS Стиль

.carousel-caption .row{
    display: inline-flex;
    width: 200px;
}

PHP L oop

   <?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"]; 
        ?>
            <div class='row'>
                <div id='eventCard' align='center'>   
                    <hr>
                    <h1><?php echo $event?></h1>
                    <br>
                    <p>
                        <i class='far fa-calendar-times'></i> <?php echo $date; ?>
                        <br>
                        <i class='fas fa-map-marker-alt'></i> <?php echo $loc; ?>
                        <br>
                        <i class='far fa-clock'></i><?php echo $time; ?>
                        <br>
                        <br>
                        <a href='events.php'>More Info</a>
                    </p>
                    <hr>
                </div>
            </div>
     <?php
            }
        }
    ?>

Answer 2

В вашем PHP l oop добавлен <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>

Answer 3

@ PHPology

Измененный исходный код:

<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'>

    <div class='row'>
       <div id='eventCard' align='center' class='col-md-4'>
      <!--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 " 

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

Я пробовал и ваш предложенный способ и способ, которым я разместил в этом комментарии, но данные по-прежнему располагаются вертикально.