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

【问题标题】：How can I prevent Bootstrap carousel images from stacking? HTML/CSS (using PHP to display images)如何防止 Bootstrap 轮播图像堆叠？ HTML/CSS（使用 PHP 显示图像）
【发布时间】：2018-07-14 21:13:10
【问题描述】：

我有一个显示我的图像的 Bootstrap 轮播。它的一切工作正常，直到我不得不更改我的编码以调用与上传的帖子链接的特定图像。现在图像堆叠在另一个上，而不是显示在可以手动或自动循环显示的单个帧中。有谁知道我可以做些什么来解决这个问题？

这是我让它正常工作时的 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>

这段代码一切正常。但是，当我将其更改为此时，图像会堆叠并且不再显示为单独的帧（我刚刚选择了幻灯片部分的包装器）：

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

这是我在我的 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>

我还没有为轮播添加任何自定义/修改的 CSS。

我认为在这一点上它可能与 PHP 相比与 HTML 有更多的关系。

编辑：供未来参考的工作代码

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

【问题讨论】：

标签： php html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

试试这个：

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

您可能需要使用引号，但您的问题是您在单曲 div.item 上生成了所有 img 标签。对于每张图片，您需要将 img 包裹在 div.item 中。

【讨论】：

我认为你也需要摆脱外部。
谢谢！我之前完全没听懂。在对您的建议进行了一些修改之后，我让它按照我想要的方式工作。一切都很好地循环并显示为单个图像。出于某种原因，轮播的第一帧仍然显示所有图像，但之后的任何内容都显示为单个图像，并且它永远不会循环回到显示堆栈的起始帧。对此有什么想法吗？
我还考虑去掉外部 for，如果我删除它，它不会让我循环浏览任何图像并且它们都保持堆叠状态。所以必须保持这个功能才能正常工作。
很高兴听到这个消息，但是外部 for 什么也没做，也许是因为没有显示出来的一些错误？如果我的回答对你有帮助，你能接受吗？
我会调查的，是的，我可以！