Bootstrap 3：如何创建响应式，方形.thumbnail div

Question

我使用Bootstrap 3的.thumbnail类创建了一个图像网格。关于图像大小调整，所有内容似乎都工作得很好，并且列根据窗口大小而变化。唯一的问题是图像都是不同的大小，纵向/横向都是。这会导致尴尬的中断和缩略图divs的“堆积”......

我希望找到一种方法来使用.thumbnail类创建SQUARE响应div的网格。换句话说，Bootstrap确定的宽度将反映在div的高度。例如。缩略图图像缩放为220像素，因此包含它的div的高度也将设置为220像素（内部的缩略图图像可以扩展到八个高度或宽度的100％，具体取决于方向）。有点像这样：

以下是我正在使用的基本代码：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4 col-md-3">
      <a href="<?php echo dirname($image->url()); ?>/detail/<?php echo $image->name() ?>-detail.jpg" class="thumbnail fancybox" rel="group"><img src="<?php echo $image->url() ?>"></a>
    </div>
  </div>
</div>

非常感谢您提供的任何帮助。我也愿意接受其他方法的建议。我甚至尝试使用jquery Isotope的砌体设置来解决堆积问题，但无法使其工作：（

Answer 1

您可以尝试这样的CSS方法..

http://bootply.com/85737

但是，这不是跨浏览器兼容的，因此您仍可能需要使用Isotope插件。这是一个使用Isotope + Bootstrap的工作示例..

http://bootply.com/61482

Answer 2

我为bootstrap创建了一个小插件，名为bootstrap-grid-h。你可以尝试使用它。这是css唯一的解决方案。您可以在此处找到它：bootstrap-grid-h

Answer 3

对于类似这样的东西，我建议使用砌体，它会给你一种最好的效果，在这种效果下，图像可以适合块状而不会中断。

例如：http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout