Bootstrap 3：如何创建响应式方形.div div [英] Bootstrap 3: How to create responsive, square .thumbnail divs

问题描述

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

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…

我希望找到一种使用.thumbnail类创建SQUARE响应div网格的方法。因此，换句话说，由Bootstrap确定的宽度将反映在div的高度中。例如。缩略图图像的缩放比例为220px，因此包含该缩略图的div的高度也将设置为220px（并且缩略图图像的缩放比例最高为高度或宽度的八分之100％，具体取决于方向）。像这样：

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:

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

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>

非常感谢您可能提供的帮助。我也欢迎其他方法的建议。我什至尝试使用jquery同位素的砌体设置来解决堆积问题，但无法使其工作：（

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 :(

推荐答案

您可以尝试这样的仅CSS方法。

You could try a CSS only approach like this this..

http：/ /bootply.com/85737

但是，这与跨浏览器不兼容，因此您可能仍要使用Isotope插件。使用同位素+引导程序。

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..

http://bootply.com / 61482

这篇关于Bootstrap 3：如何创建响应式方形.div div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！