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

我已经使用Bootstrap 3的.thumbnail类创建了一个图像网格。关于图像大小调整，一切似乎都很顺利，并且列根据窗口大小而变化。唯一的问题是图像大小不一，并且都是纵向/横向。这将导致尴尬的断裂和“堆积的”以缩略图的div ...Bootstrap 3：如何创建响应式，正方形.thumbnail div

This is what I currently have

我希望能找到一种方法来创建一个使用.thumbnail类方形响应的div的网格。换句话说，由Bootstrap确定的宽度将被反映在div的高度。例如。缩略图图像被缩放到220px，因此包含它的div的高度也将被设置为220px（并且根据方向，缩略图图像可以按照高度或宽度的八倍放大到100％）。的排序是这样的：

This is what I'm hoping to achieve

这里是我使用的基本代码：

<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的石工设置来解决堆积问题，但无法让它工作:(

来源

2013-10-21 ornmnt

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

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

来源

2013-10-21 21:39:23

感谢您的意见。我想你是对的。我将继续尝试让Isotope工作。我认为它与我的代码中的某些内容冲突......再次，谢谢！ – ornmnt

你可以尝试只CSS这样的方法，这..

http://bootply.com/85737

然而，这个我s不能跨浏览器兼容，所以你仍然可能想要使用Isotope插件。这里是

http://bootply.com/61482

来源

2013-10-22 02:44:45 ZimSystem

是的，我想我将不得不与Isotope一起去。我还没有能够使它与我的代码一起工作，但我会继续努力。感谢您的建议！ – ornmnt

我已经创建了一个引导小插件，叫做自举网-H使用同位素+引导工作的例子..。你可以尝试使用它。这是唯一的解决方案。你可以在这里找到它：bootstrap-grid-h

来源

2015-02-06 07:49:12

我检查了这一点，它似乎工作，但我希望我的方形div有阴影背景的子div，所以我不得不重写您的默认8px填充。只需单独添加'.h-content'就行不通了，因为'.h> div'规则会覆盖不太具体的'.h-content'。所以我不得不添加一个更具体的规则'.h> div.h-content {padding：0px}' – VictorB

嗨，谢谢你试用它。您实际上可以在_vars.scss中更改它，因为默认情况下它需要$ grid-gutter-width/2，这是引导程序网格的默认填充。希望能帮助到你 –

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

回答

相关问题