Question

我有一个显示我的图像的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>

Answer 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标记。对于每个图像，您需要在div.item中环绕img。

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

1 个答案: