Czy istnieje sposób, aby wszystkie elementy w klasie wiersza miały taką samą wysokość?

Question

W Bootstrap, czy istnieje prosty sposób, aby wszystkie elementy rozpiętości w rzędzie miały taką samą wysokość, tj. Wysokość najwyższego elementu?

Oto przykład tego, co mam na myśli.

http://jsfiddle.net/DVnZ6/

Answer 1

Można to zrobić przy użyciu jQuery:

boxes = $('.well'); 
maxHeight = Math.max.apply(
    Math, boxes.map(function() { 
    return $(this).height(); 
}).get()); 
boxes.height(maxHeight); 

Oto przykład: http://jsfiddle.net/DVnZ6/3/

Answer 2

Jeśli ustawisz wysokość przęseł do 100% i ustawić wysokość wiersza do ustalonej wartości, wszystkie będą pasować do wysokości kontenera.

Oczywiście należy znać oczekiwaną wysokość kolumn, ale jest to rozwiązanie wolne js.

Answer 3

Zdarzenie zmiany rozmiaru należy dodać do tego kodu, ponieważ wysokość zawartości w większości przypadków zależy od rozdzielczości i powoduje niepożądane problemy z projektowaniem, takie jak przepełniony tekst.

Oto bardziej kompletna wersja kodu, który obsługuje zmiany rozmiaru oraz

jQuery(function() { 

    equalMaxWidth = 500; /* Customize viewport width - for resolutions below this number, the height equalizing will not work */ 
    boxes = jQuery('.well'); 

    boxes.removeAttr('style'); 
    if(jQuery(window).width() > equalMaxWidth){ 
     equalBoxHeights(boxes); 
    }; 

    window.onresize = function() { 
     boxes.removeAttr('style'); 
     console.log(jQuery(window).width()); 
     if(jQuery(window).width() > equalMaxWidth){ 
      equalBoxHeights(boxes); 
     }; 
    }; 
}); 

function equalBoxHeights(boxes) { 
    maxHeight = Math.max.apply(
      Math, boxes.map(function() { 
       return jQuery(this).height(); 
      }).get()); 
    boxes.height(maxHeight); 
} 

Sprawdź demo na jsFiddle http://jsfiddle.net/o4w7tjtz/

Wskazówka: spróbuj rozmiaru 3rd ramę pionową (zauważony równych wysokościach wokół 500pw szerokość?)

Answer 4

Mam łatwiejszy sposób, aby rozwiązać ten problem w elastyczny sposób:

//Make every Tile the same height(depending on the highest in row, no matter whats inside) 

$(document).ready(function() { 
    var boxes = $('.well'); 

    //Set the Height as in the example above on page Load 
    setHeight(); 

    // On viewportchange reset the height of each Element and again use the above example to set the heights 
    $(window).resize(function() { 
     boxes .css('height', 'auto'); 
     setHeight(); 
    }); 

    function setHeight() { 
     var maxHeight = Math.max.apply(
       Math, boxes.map(function() { 
        return $(this).height(); 
       }).get()); 
     boxes.height(maxHeight); 
    } 

});