¿Hay alguna manera de hacer que todos los elementos en una clase de fila tengan la misma altura?

Question

En Bootstrap, ¿hay alguna manera fácil de hacer que todos los elementos del tramo en una fila tengan la misma altura, es decir, la altura del elemento más alto?

Aquí hay un ejemplo de lo que quiero decir.

http://jsfiddle.net/DVnZ6/

Answer 1

Puede hacerlo utilizando jQuery:

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

He aquí un ejemplo: http://jsfiddle.net/DVnZ6/3/

Answer 2

Si ajusta la altura de los tramos a 100% y ajustar la altura de la fila a un valor fijo, todos coincidirán con la altura del contenedor.

Por supuesto, debe conocer la altura esperada de las columnas, pero es una solución libre de js.

Answer 3

El evento de cambio de tamaño debería agregarse a este código ya que el alto contenido en la mayoría de los casos varía en diferentes resoluciones y eso produce problemas de diseño no deseados como el texto desbordado.

Aquí es una versión más completa del código que puede ajustar los tamaños, así

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); 
} 

Comprobar la demo en jsFiddle http://jsfiddle.net/o4w7tjtz/

Consejo: intente cambiar el tamaño del marco vertical tercero (notado la misma altura en torno a 500pw ancho?)

Answer 4

Tengo una manera más fácil de resolver este problema de manera receptiva:

//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); 
    } 

});