引导缩略图未正确对齐
Posted
技术标签:
【中文标题】引导缩略图未正确对齐【英文标题】:Bootstrap thumbnails not aligning correctly 【发布时间】:2018-10-06 13:48:17 【问题描述】:我有以下代码希望获得集合中拼图的缩略图,但缩略图大小不同,我将如何更改我的代码以正确显示:
<div class="row"><?php
while ( $row = $result->fetch_assoc() ) ?>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "getimage2.php?id=<?php echo $row['id']; ?>" alt = "<?php echo ucfirst($row['jigsaw_title']); ?>">
</div>
<div class = "caption text-center">
<h3><?php echo ucfirst($row['jigsaw_title']); ?></h3>
<p>
<?php echo $row['jigsaw_size_wmm']."mm x ".$row['jigsaw_size_hmm']."mm / ".mmToIn($row['jigsaw_size_wmm'])."in x ".mmToIn($row['jigsaw_size_hmm'])."in\n"; ?>
<p>
<a href='#myModal1' class='btn btn-primary btn-sm' id='custId' data-toggle='modal' data-id='".$row['id']."' ><i class='glyphicon glyphicon-eye-open'></i></a>
<a href='#myModal2' class='btn btn-warning btn-sm' id='editrecord' data-toggle='modal' data-id='".$row['id']."'><i class='glyphicon glyphicon-pencil'></i></a>
<a href='#myModal3' class='btn btn-danger btn-sm' id='deleterecord' data-toggle='modal' data-id='".$row['id']."'><i class='glyphicon glyphicon-remove'></i></a>
</p>
</div>
</div>
<?php
?>
</div>
【问题讨论】:
您使用的是什么版本的引导程序?它似乎是 3.x 一个快速的脏修复方法是在.thumbnail
上设置一个最大高度或在图像上设置一个固定高度
另外,为什么第五个缩略图“祈祷的凉亭”在它的位置,而不是在第一个下方的左侧?
长话短说,这是因为 bootstrap 3 使用浮动 div,浮动上下文变得很奇怪。我想我有一个解决方案,但在我回答之前,你愿意改变一些 CSS 吗?
【参考方案1】:
根据您在 cmets 中的回答,这就是我的工作。不幸的是,CSS 浮动有很多缺点,其中之一就是你看到的 Gazebo 祈祷的奇怪设置。
我的修复改变了一些使用 Flexbox 的东西,这对于这种高度基本相同但不完全一样的场景更可靠。
如果有什么不适合你,请告诉我,这是我使用基本 html + CSS 的 sn-p
.flex-container .row
display: flex;
flex-wrap: wrap;
.flex-container .row .col-sm-6,
.flex-container .row .col-md-3
flex-direction: column;
display: flex;
justify-content: space-between;
.flex-container .row .col-sm-6 .text-center,
.flex-container .row .col-md-3 .text-center
margin-bottom: 10px;
<link href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css" rel="stylesheet"/>
<section class="container flex-container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img src="https://placehold.it/500x500" class="responsive"></div>
<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti doloribus eius beatae nihil, reiciendis ex placeat facere dolores, commodi eveniet tempore ratione, et, ducimus error cum. Architecto et, facilis assumenda.</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img src="https://placehold.it/500x300" class="responsive"></div>
<div class="text-center">Aliquam rem culpa, facere labore dolore autem pariatur quos, animi voluptatibus aut voluptas itaque obcaecati voluptatum quod eveniet consectetur libero adipisci laudantium consequuntur, delectus corporis! Tempora dignissimos eligendi, excepturi non.</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img src="https://placehold.it/500x500" class="responsive"></div>
<div class="text-center">Et eum, aliquid aliquam molestiae ducimus ipsa nam minus similique magni, ullam est, reprehenderit sunt impedit error distinctio minima nulla quod consequuntur. Earum beatae sunt cumque, doloribus quasi numquam quos!</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img src="https://placehold.it/500x500" class="responsive"></div>
<div class="text-center">Quae commodi asperiores perspiciatis, assumenda maxime necessitatibus qui. Incidunt, expedita voluptas nihil dolor ab nam, officia fugit quae voluptatum nulla sapiente alias asperiores atque voluptates consectetur cumque facilis minus beatae.</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img src="https://placehold.it/500x500" class="responsive"></div>
<div class="text-center">In atque ab odio est quia fugit quam blanditiis perspiciatis doloribus minus? Nulla expedita sequi quam vitae quaerat eveniet cum at, deserunt molestias explicabo. Cupiditate unde eligendi reprehenderit, accusamus numquam.</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img src="https://placehold.it/500x500" class="responsive"></div>
<div class="text-center">Veritatis quasi dolorem sunt itaque, sit officia blanditiis architecto possimus. Vitae repudiandae aperiam nostrum pariatur, odit eligendi, vero. Alias id adipisci culpa, vitae hic porro provident doloribus qui quisquam possimus.</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img src="https://placehold.it/500x500" class="responsive"></div>
<div class="text-center">Voluptate maxime quasi sequi nobis repudiandae optio nesciunt sapiente, ipsa eaque itaque numquam velit iusto atque, hic officiis id quidem minima consectetur illo repellat iure molestiae ipsam minus. Quae, ipsum!</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img src="https://placehold.it/500x500" class="responsive"></div>
<div class="text-center">Impedit ipsa nemo libero in maiores, aperiam earum assumenda minus animi, ut necessitatibus, a ea. Illo et, dolorum velit repellat optio nam, iusto, ea nesciunt nostrum sunt ipsam odit nisi.</div>
</div>
</div>
</section>
对于您的 PHP 代码,我相信这应该生成与我正在使用的 HTML 相同的 HTML
<div class="container flex-container">
<div class="row">
<?php
while ( $row = $result->fetch_assoc() ) ?>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src = "getimage2.php?id=
<?php echo $row['id']; ?>" alt = "
<?php echo ucfirst($row['jigsaw_title']); ?>">
</div>
<div class="caption text-center">
<h3>
<?php echo ucfirst($row['jigsaw_title']); ?></h3>
<p>
<?php echo $row['jigsaw_size_wmm']."mm x ".$row['jigsaw_size_hmm']."mm / ".mmToIn($row['jigsaw_size_wmm'])."in x ".mmToIn($row['jigsaw_size_hmm'])."in\n"; ?>
<p>
<a href='#myModal1' class='btn btn-primary btn-sm' id='custId' data-toggle='modal' data-id='".$row['id']."' ><i class='glyphicon glyphicon-eye-open'>
</i></a>
<a href='#myModal2' class='btn btn-warning btn-sm' id='editrecord' data-toggle='modal' data-id='".$row['id']."'><i class='glyphicon glyphicon-pencil'>
</i></a>
<a href='#myModal3' class='btn btn-danger btn-sm' id='deleterecord' data-toggle='modal' data-id='".$row['id']."'><i class='glyphicon glyphicon-remove'>
</i></a>
</p>
</div>
</div>
<?php
?>
</div>
</div>
如果您有任何问题或由于某种原因这不起作用,请告诉我。
【讨论】:
它工作得更好,但我如何让文本内容与 col-sm div 的底部对齐,以便所有拼图信息都在 div 的底部? @ZJGreen 刚刚更新了问题,如果您是这个意思,请告诉我。 现在很好,感谢您的帮助,现在我要做的就是添加分页,但我想我已经排序了,再次感谢。【参考方案2】:由于您每行仅显示四张图片,请尝试以下代码:
<?php $cnt = 0; ?>
<div class="row"><?php
while ( $row = $result->fetch_assoc() ) ?>
<?php $cnt += 1; ?>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "getimage2.php?id=<?php echo $row['id']; ?>" alt = "<?php echo ucfirst($row['jigsaw_title']); ?>">
</div>
<div class = "caption text-center">
<h3><?php echo ucfirst($row['jigsaw_title']); ?></h3>
<p>
<?php echo $row['jigsaw_size_wmm']."mm x ".$row['jigsaw_size_hmm']."mm / ".mmToIn($row['jigsaw_size_wmm'])."in x ".mmToIn($row['jigsaw_size_hmm'])."in\n"; ?>
</p>
<p>
<a href='#myModal1' class='btn btn-primary btn-sm' id='custId' data-toggle='modal' data-id='".$row['id']."' ><i class='glyphicon glyphicon-eye-open'></i></a>
<a href='#myModal2' class='btn btn-warning btn-sm' id='editrecord' data-toggle='modal' data-id='".$row['id']."'><i class='glyphicon glyphicon-pencil'></i></a>
<a href='#myModal3' class='btn btn-danger btn-sm' id='deleterecord' data-toggle='modal' data-id='".$row['id']."'><i class='glyphicon glyphicon-remove'></i></a>
</p>
</div>
</div>
<?php
if($cnt == 4)
echo "</div>";
echo "<div class = 'row'>";
$cnt = 0;
?>
<?php ?>
</div>
解决方案是,如果您已经显示了四张图片,请为下一张图片创建另一个 row
。
【讨论】:
这是我尝试的第一件事,但对我不起作用,无论如何,谢谢@Jhecht 的解决方案对我有用。 好的,很高兴听到您的问题得到解答。无论如何,这个解决方案对我有用。以上是关于引导缩略图未正确对齐的主要内容,如果未能解决你的问题,请参考以下文章