4

我使用 Bootstrap 3 的 .thumbnail 类创建了一个图像网格。在调整图像大小以及列根据窗口大小而变化方面，一切似乎都很好。唯一的问题是图像的大小都不同，并且都是纵向/横向的。这会导致缩略图 div 出现尴尬的中断和“堆积”……</p>

这是我目前拥有的

我希望找到一种使用 .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 的砌体设置来解决堆积问题，但无法让它工作:(

4

3 回答 3

4

您可以尝试像这样仅使用 CSS 的方法..

http://bootply.com/85737

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

http://bootply.com/61482

于 2013-10-22T02:44:45.570 回答
2

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

于 2015-02-06T07:49:12.383 回答
0

对于这样的事情，我建议使用砖石，它会给你一种 pinterest 效果，其中图像将适合块样式而不会中断。

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

于 2013-10-21T21:39:23.290 回答