CSS Bootstrap 3：如何创建响应式方形 .thumbnail div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19504755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: How to create responsive, square .thumbnail divs
提问by ornmnt
I have created a grid of images using Bootstrap 3's .thumbnail class. Everything seems to be working great with regards to the images resizing, and the columns changing depending on the window size. The only problem is the images are all different sizes, and both portrait/landscape orientation. This causes awkward breaks and "pile-ups" with the thumbnail divs…
我使用 Bootstrap 3 的 .thumbnail 类创建了一个图像网格。关于图像大小调整以及列根据窗口大小而变化，一切似乎都很好。唯一的问题是图像的大小都不同，并且都是纵向/横向。这会导致缩略图 div 出现尴尬的中断和“堆积”……
I was hoping to find a way to create a grid of SQUARE responsive divs using the .thumbnail class. So in other words, the width determined by Bootstrap would be mirrored in the div's height. E.g. the thumbnail image is scaled to 220px so the height of the div containing it would be set to 220px as well (and the thumbnail image inside scales up to 100% of eight the height or width, depending on orientation). Sort of like this:
我希望找到一种使用 .thumbnail 类创建 SQUARE 响应式 div 网格的方法。因此，换句话说，Bootstrap 确定的宽度将反映在 div 的高度中。例如，缩略图图像被缩放到 220 像素，因此包含它的 div 的高度也将设置为 220 像素（并且里面的缩略图图像缩放到高度或宽度的 100%，具体取决于方向）。有点像这样：
Here is the basic code I'm using:
这是我正在使用的基本代码：
<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>
Thanks so much for any help you might be able to offer. I'm also open to suggestions for other approaches. I even tried using jquery Isotope's masonry setting to solve the pile up problem but couldn't get it to work :(
非常感谢您提供的任何帮助。我也愿意接受其他方法的建议。我什至尝试使用 jquery Isotope 的砌体设置来解决堆积问题，但无法使其正常工作:(
回答by Zim
You could try a CSS only approach like this this..
你可以试试这样的 CSS only 方法..
However, this is not cross-browser compatible so you still may want to use the Isotope plugin. Here is a working example that uses Isotope + Bootstrap..
但是，这不是跨浏览器兼容的，因此您可能仍想使用 Isotope 插件。这是一个使用 Isotope + Bootstrap 的工作示例。
回答by Andrej Burcev
I have created a small plugin for bootstrap, called bootstrap-grid-h. You can try using it. It is css only solution. You can find it here: bootstrap-grid-h
我为 bootstrap 创建了一个小插件，叫做 bootstrap-grid-h。您可以尝试使用它。它是 css 唯一的解决方案。你可以在这里找到它：bootstrap-grid-h
回答by Sergio Wizenfeld
For something like this I would recommend using masonry which will give you a pinterest effect where images will fit in a block style without breaks.
对于这样的事情，我建议使用砌体，这会给你一个 pinterest 效果，其中图像将适合块样式而不会中断。
such as: http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
如：http: //osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
