Blog

Columnas que se cargan a la derecha - Bootstrap

Si trabajas continuamente con Bootstrap seguramente te habrá pasado alguna vez que cuando usas el sistema de grids algunas de estas se cargan a la derecha, esto pasa generalmente por que las columnas son de diferente alto

Te mostraré una forma de solucionarlo utilizando un plugin para jQuery.
Lo primero que tendremos que hacer es descargar el plugin jquery.matchHeight.js directamente desde su github en https://github.com/liabru/jquery-match-height

Además podemos instalarlo usando Bower y NPM:
bower install matchheight
npm install jquery-match-height

Una vez descargado lo llamamos en nuestro sitio como cualquier otro script usando algo como:
<script src="/jquery.matchHeight.js" type="text/javascript"></script>

También es importante mencionar que este plugin requiere de jQuery.

Una vez descargado solo nos queda llamarlo así:
$(function() {
    $('.item').matchHeight(options);
});​

Si requieres más información sobre el plugin, así como de sus opciones visita su github: https://github.com/liabru/jquery-match-height

Una vez ajustados los altos de todos los items el resultado sería algo así:


Como siempre, espero te haya servido este brevísimo para resolver un problema común :-D
 
Sígueme en Twitter: @Javi_Mata

Javi Mata

Web Developer, especializado en PHP, Shopify, Joomla, Wordpress, HTML5, CSS, etc.

Donativos

Ver más formas de apoyar

Socio-certificado.jpg