这是我的Boostrap网格: http://i59.tinypic.com/nozn12.png
每张图片都有不同的尺寸,不幸的是,最重要的图片包裹着一排留空的空间。 我应该在每个图像中给出相同的大小,但我不能,因为这不是一个固定的布局。
此问题是否有任何修复/解决方案?这是代码
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="temp/1.jpg" class="img-responsive">
<h4>4280 / 5PL</h4>
</div>
</div>
<div class="col-sm-6 col-md-3">
ecc.
</div>
<div class="col-sm-6 col-md-3">
ecc.
</div>
</div>
答案 0 :(得分:1)
对<div class="col-sm-6 col-md-3">
$.fn.eqHeights = function(options) {
var defaults = {
child: false
};
var options = $.extend(defaults, options);
var el = $(this);
if (el.length > 0 && !el.data('eqHeights')) {
$(window).bind('resize.eqHeights', function() {
el.eqHeights();
});
el.data('eqHeights', true);
}
if( options.child && options.child.length > 0 ){
var elmtns = $(options.child, this);
} else {
var elmtns = $(this).children();
}
var prevTop = 0;
var max_height = 0;
var elements = [];
elmtns.height('auto').each(function() {
var thisTop = this.offsetTop;
if (prevTop > 0 && prevTop != thisTop) {
$(elements).height(max_height);
max_height = $(this).height();
elements = [];
}
max_height = Math.max(max_height, $(this).height());
prevTop = this.offsetTop;
elements.push(this);
});
$(elements).height(max_height);
};
// run on load so it gets the size:
// can't have the same pattern for some reason or it scans the page and makes all the same height. Each row should be separate but it doesn't work that way.
$(window).load(function() {
//$('[class*="eq-"]').eqHeights();
$('.foo [class*="eq-"]').eqHeights();
$('.foo2 [class*="eq-"]').eqHeights();
});
将<div class="row foo">
用于<div class="row">
使用col-sm-6 col-md-3将eq-col-sm-6 eq-col-md-3类添加到所有div中
此处DEMO