Исходя из ваших ответов в комментариях, это то, что я получил работать.К сожалению, у CSS-поплавков есть много недостатков, один из которых - странная настройка, которую вы видите в беседке с молитвой.
Мое исправление изменяет некоторые вещи для использования Flexbox, который немного более надежен для такого рода в основномСценарии "все-же-высота-но-не-точно".
Дайте мне знать, если что-то не работает для вас, вот мой фрагмент с базовым HTML + CSS
.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" alt="" 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" alt="" 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" alt="" 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" alt="" 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" alt="" 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" alt="" 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" alt="" 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" alt="" 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, что и я, используя
<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>
Дайте мне знать, если у вас есть какие-либовопросы или если по какой-то причине это не работает.