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

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <?php
    $data = getDataFromDatabase(); // 从数据库获取动态数据
    $count = count($data);
    for ($i = 0; $i < $count; $i++) {
      // 根据数据数量生成对应数量的指示器
      $active = ($i == 0) ? 'active' : '';
      echo '<li data-target="#myCarousel" data-slide-to="' . $i . '" class="' . $active . '"></li>';
    }
    ?>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <?php
    foreach ($data as $key => $item) {
      $active = ($key == 0) ? 'active' : '';
      echo '<div class="item ' . $active . '">';
      echo '<img src="' . $item['image'] . '" alt="' . $item['title'] . '">';
      echo '<div class="carousel-caption">';
      echo '<h3>' . $item['title'] . '</h3>';
      echo '<p>' . $item['description'] . '</p>';
      echo '</div>';
      echo '</div>';
    }
    ?>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>