如何防止 Bootstrap 轮播图像堆叠？ HTML/CSS（使用 PHP 显示图像）

Question

I have a Bootstrap carousel displaying my images.我有一个 Bootstrap 轮播显示我的图像。 Everything for it was working fine, until I had to change my coding to call for specific images linked to the post the were uploaded with.它的一切工作正常，直到我不得不更改我的编码以调用链接到上传帖子的特定图像。 Now the images are stacking on another another instead of showing in individual frames that can be manually or automatically cycled through.现在图像堆叠在另一个上，而不是显示在可以手动或自动循环的单个帧中。 Does anyone know what I can do to fix this issue?有谁知道我能做些什么来解决这个问题？

Here is the HTML from when I had it working correctly:这是我正常工作时的 HTML：

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
        <!-- Indicators -->
        <ol class="carousel-indicators">
        <?php
            $i = 0;
            for ($a = 2; $a < count($files); $a++):
          ?>
          <li data-target="#myCarousel" data-slide-to="<?php echo $i; ?>" class="<?php echo $i == 0 ? 'active': ''; ?>"></li>
        <?php
          $i++;
          endfor;
        ?>
        </ol> 

        <!-- Wrapper for slides -->
        <div class="carousel-inner">

          <?php
            $i = 0;
            for ($a = 2; $a < count($files); $a++):
          ?>

          <div class="item <?php echo $i == 0 ? 'active': '';  ?>" align="center">
            <!-- THE LINE BELOW THIS IS WHERE THE ISSUE WILL BE WHEN I CHANGE THE CODING -->
            <img src="admin/images/<?php echo $files[$a];?>">
          </div>

          <?php
            $i++;
            endfor;
          ?>
        </div>

        <!-- Left and right 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>

Everything works fine with this code.使用此代码一切正常。 However, when I change it to this, the images stack and no longer show as individual frames (I've just singled out the wrapper for slides portion):但是，当我将其更改为此时，图像会堆叠并且不再显示为单独的帧（我刚刚挑出了幻灯片部分的包装器）：

      <?php
        $i = 0;
        for ($a = 2; $a < count($files); $a++):
      ?>

      <div class="item <?php echo $i == 0 ? 'active': '';  ?>" align="center">

      <!-- ON THE LINE BELOW IS THE CHANGED CODE THAT THE ISSUES SHOWS UP FOR -->

       <?php 
        $imsql = "SELECT img_name, img_path FROM images WHERE post_id = '$id'";
        $q2 = $db->query($imsql);
        if($q2->num_rows>0){
          while ($imrow = $q2->fetch_object()){
          echo "<img src='admin/images/".$imrow->img_name."' width='auto' height='auto' >";
        }
      }
        ?>


      </div>

      <?php
        $i++;
        endfor;
      ?>
    </div>

And here is the pertinent information I have in my <head> in my HTML:这是我在 HTML 中的<head>中的相关信息：

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

I have not added any custom/modified CSS for the carousel yet.我还没有为轮播添加任何自定义/修改的 CSS。

I'm thinking it might have something to do more with the PHP than the HTML at this point.我认为在这一点上，PHP 可能比 HTML 更重要。

EDIT: WORKING CODE FOR FUTURE REFERENCE编辑：供将来参考的工作代码

<div class="carousel-inner">

          <?php
            $i = 0;
            for ($a = 2; $a < count($files); $a++):
          ?>

           <?php 
            $imsql = "SELECT img_name, img_path FROM images WHERE post_id = '$id'";
            $q2 = $db->query($imsql);
            if($q2->num_rows>0){
              while ($imrow = $q2->fetch_object()){  
                echo '<div class="item' . ($i++ === 0 ? ' active' : '') . '" align="center">';
               echo '<img src="admin/images/' . $imrow->img_name . '" width="auto" height="auto"/>';
               echo '</div>';
            }
          }
            ?>

          <?php
            $i++;
            endfor;
          ?>
        </div>

Answer 1

Try this:尝试这个：

  <?php
    $i = 0;
    for ($a = 2; $a < count($files); $a++):
  ?>

  <?php 
    $imsql = "SELECT img_name, img_path FROM images WHERE post_id = '$id'";
    $q2 = $db->query($imsql);
    if($q2->num_rows>0){
      while ($imrow = $q2->fetch_object()){
      echo '<div class='"item' . $i == 0 ? 'active': '' . '" align="center"><img src="admin/images/"' . $imrow->img_name . '" width="auto" height="auto"></div>";
    }
  }
    ?>




  <?php
    $i++;
    endfor;
  ?>

You may need to play around quotes, but your problema is that you generated all img tags on a singles div.item.您可能需要玩转引号，但您的问题是您在单个 div.item 上生成了所有 img 标签。 For each image, you need to wrap around the img in a div.item.对于每个图像，您需要将 img 包裹在 div.item 中。

如何防止 Bootstrap 轮播图像堆叠？ HTML/CSS（使用 PHP 显示图像）

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-02-06 12:27:13

如何防止 Bootstrap 轮播图像堆叠？ HTML/CSS（使用 PHP 显示图像）

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-02-06 12:27:13

解决方案1
1 已采纳 2018-02-06 12:27:13