CODEWITHSUNDEEP
htmlcssgrid
R M
R M

Reputation: 317

Boostrap responsive grid issue with different images size

this is my Boostrap grid: http://i59.tinypic.com/nozn12.png

Each image has different sizes, unfortunately the heightest one wraps the row leaving an empty space. I should give the same size in each image, but I can't because this isn't a fixed layout.

Is there any fix / solution to this issue? Here's the code

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

Upvotes: 0

Views: 126

Answers (1)

Swaranan Singha Barman
Swaranan Singha Barman

Reputation: 347

use equal height for <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();

  });

use <div class="row foo"> for <div class="row">

and add eq-col-sm-6 eq-col-md-3 class to all your divs with col-sm-6 col-md-3

here DEMO

Upvotes: 1

Related Questions