【问题标题】:Boostrap responsive grid issue with different images size具有不同图像大小的引导响应网格问题
【发布时间】:2014-11-17 19:12:12
【问题描述】:

这是我的 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>

【问题讨论】:

    标签: html css grid


    【解决方案1】:

    &lt;div class="col-sm-6 col-md-3"&gt; 使用相同的高度

    $.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();
    
      }); 
    

    &lt;div class="row foo"&gt; 用于&lt;div class="row"&gt;

    并使用 col-sm-6 col-md-3 将 eq-col-sm-6 eq-col-md-3 类添加到您的所有 div 中

    这里DEMO

    【讨论】:

    • 谢谢,太完美了!
    猜你喜欢
    • 2014-01-05
    • 1970-01-01
    • 2022-01-26
    • 1970-01-01
    • 2020-06-05
    • 2015-10-19
    • 1970-01-01
    • 1970-01-01
    • 2016-09-30
    相关资源
    最近更新 更多