如何防止 Bootstrap 轮播图像堆叠？ HTML/CSS（使用 PHP 显示图像）
Posted
技术标签:
【中文标题】如何防止 Bootstrap 轮播图像堆叠？ HTML/CSS（使用 PHP 显示图像）【英文标题】：How can I prevent Bootstrap carousel images from stacking? HTML/CSS (using PHP to display images) 【发布时间】：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 . '" />';
echo '</div>';
?>
<?php
$i++;
endfor;
?>
</div>
【问题讨论】：
【参考方案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 . '" ></div>";
?>
<?php
$i++;
endfor;
?>
您可能需要使用引号，但您的问题是您在单曲 div.item 上生成了所有 img 标签。对于每张图片，您需要将 img 包裹在 div.item 中。
【讨论】：
我认为你也需要摆脱外部。 谢谢！我之前完全没听懂。在对您的建议进行了一些修改之后，我让它按照我想要的方式工作。一切都很好地循环并显示为单个图像。出于某种原因，轮播的第一帧仍然显示所有图像，但之后的任何内容都显示为单个图像，并且它永远不会循环回到显示堆栈的起始帧。对此有什么想法吗？ 我还考虑去掉外部 for，如果我删除它，它不会让我循环浏览任何图像并且它们都保持堆叠状态。所以必须保持这个功能才能正常工作。 很高兴听到这个消息，但是外部 for 什么也没做，也许是因为没有显示出来的一些错误？如果我的回答对你有帮助，你能接受吗？ 我会调查的，是的，我可以！以上是关于如何防止 Bootstrap 轮播图像堆叠？ HTML/CSS（使用 PHP 显示图像）的主要内容，如果未能解决你的问题，请参考以下文章
如何在轮播 div 之外放置 Bootstrap Carousel 图像标题？