Bootstrap

Un problème récurrent avec bootsrap est d’avoir une présentation en « grille » avec des colonnes de même hauteur.

En effet, par défaut, les colonnes ont leur hauteur déterminée par leur contenu, et aucune solution CSS n’existe pour modifier ce comportement, car les différentes solutions proposées en cherchant sur le net ont d’autres incidences sur la présentation par défaut des colonnes.

La solution est donc de passer par du javascript pour gérer celà.

J’ai développé une petite fonction permettant de faire ça, et qui semble bien fonctionner, je vais donc vous la proposer ici, elle pourra vous faire gagner du temps !

Cette fonction nécessite que chaque colonne ait les classes de taille pour toutes les tailles de fenêtre possible, soit « col-xs-* », « col-sm-* », « col-md-* », « col-lg-* ».

Il faut également ajouter une classe « col-same-height » aux colonnes que l’on veut avoir de même hauteur.

Elle part également du principe que la taille de la grille est de 12 (valeur par défaut de bootstrap), et que les tailles de containers soient également celles par défaut de Bootsrap.
Si vous n’utilisez pas ces valeurs standard, vous pouvez les modifier facilement dans la fonction.

Code :

$(window).load(function() {
    $(window).resize(resizeColSameHeight);
    resizeColSameHeight();
});

/**
 * Redimensionnement hauteur des colonnes bootstrap "col-same-height" ligne par ligne selon la taille de la vue
 */
function resizeColSameHeight() {
    if ($('.col-same-height').length > 0) {
        var width = $('body').width();
        if (width < 768)
            var size = 'xs';
        else if (width < 992)
            var size = 'sm';
        else if (width < 1200) var size = 'md'; else var size = 'lg'; var classnames = $('.col-same-height').first().attr("class").toString().split(' '); for(var i in classnames) { var classname = classnames[i]; if (classname.indexOf('col-' + size + '-') != -1) var nbCols = 12 / classname.replace('col-' + size + '-', ''); } $('.col-same-height').css('height', 'auto'); if (nbCols > 1) {
            var i = 0;
            do {
                elems = $('.col-same-height').slice(i, i+nbCols);
                var maxHeight = 0;
                $(elems).each(function() {
                    if ($(this).height() > maxHeight)
                        maxHeight = $(this).height();
                });
                $(elems).each(function() {
                    $(this).css('height', maxHeight + 'px');
                });
                i += nbCols;
            } while (elems.length > 0);
        }
    }
}