如何防止 Bootstrap 輪播圖像堆疊？ HTML/CSS（使用 PHP 顯示圖像）

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 標簽。 對於每個圖像，您需要將 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