facebook pixel

Blog

Columnas que se cargan a la derecha - Bootstrap

Ratio: 0 / 5

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado
 
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

01001010 01000001 01001101
Web Developer, especializado en PHP, Joomla, Wordpress, HTML5, CSS, etc.

¿Me invitas un café?
©2017 Javi Mata - Web Developer
Usamos cookies para personalizar tu experiencia. Si sigues navegando estarás aceptando su uso.