Bootstrap 3：如何创建响应式的方形 .thumbnail div答案

【问题标题】：Bootstrap 3: How to create responsive, square .thumbnail divsBootstrap 3：如何创建响应式的方形 .thumbnail div
【发布时间】：2013-10-30 13:10:58
【问题描述】：

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

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

【问题讨论】：

标签： css twitter-bootstrap thumbnails twitter-bootstrap-3

【解决方案1】：

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

http://bootply.com/85737

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

http://bootply.com/61482

【讨论】：

是的，我想我将不得不选择 Isotope。我还不能让它与我的代码一起工作，但我会坚持下去。感谢您的建议！

【解决方案2】：

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

【讨论】：

我检查了这个，它似乎工作正常，但我希望我的方形 div 有带阴影背景的子 div，所以我不得不覆盖你的默认 8px 填充。仅添加.h-content 不起作用，因为.h>div 规则会覆盖不太具体的.h-content。所以我不得不添加一个更具体的规则.h>div.h-content {padding:0px}
您好，感谢您试用。您实际上可以在 _vars.scss 中更改它，因为默认情况下它需要 $grid-gutter-width / 2，这是引导网格的默认填充。希望对你有帮助

【解决方案3】：

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

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

【讨论】：

感谢您的建议。我想你是对的。我将继续努力让 Isotope 发挥作用。我认为这与我的代码中的某些内容有冲突……再次感谢您！