En utilisant twitter bootstrap 2.0 - Comment faire de l'égalité des hauteurs de colonne?

Voici un réactif CSS solution, basée sur l'ajout d'un grand rembourrage et une aussi grande marge négative de chaque colonne, puis enrouler la ligne entière dans une classe avec trop-plein caché.

.col{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#ffc;
}

.col-wrap{  
    overflow: hidden;   
}

Vous pouvez le voir travailler à jsFiddle

Modifier

En réponse à une question, voici une variante si vous avez besoin d'égale hauteur des puits ou égale hauteur des colonnes avec des coins arrondis: http://jsfiddle.net/panchroma/4Pyhj/

Modifier

En réponse à une question, ici, de la même technique dans le Bootstrap 3, même principe, juste de mettre à jour les noms de classe dans le Bootstap grille: http://jsfiddle.net/panchroma/bj4ys/embedded/result/

de jQuery hauteur() la méthode retourne la valeur du "premier élément dans l'ensemble des éléments qui correspondent". La réponse dans http://jsfiddle.net/4HxVT/ ne fonctionne que parce que le premier élément de la ligne est également le plus élevé.

Voici une autre solution basée sur jQuery:

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

(Par le biais de cette réponse: https://stackoverflow.com/a/526316/518535)

$.fn.matchHeight = function() {
  var max = 0;

  $(this).each(function(i, e) {
    var height = $(e).height();
    max = height > max ? height : max;
  });

  $(this).height(max);
};

$('.match-height').matchHeight();

Les solutions ci-dessus tous les travaux jusqu'à ce que vous ajoutez de nice bootstrap boutons! Comment vous positionnez les boutons j'ai pensé (oui, c'est mon problème).

J'ai combiné les CSS avec jquery réponse de Comment pourrais-je la force un DIV flottante à la hauteur d'un autre DIV flottante?

Après un peu branlant j'ai reçu ce, qui travaille avec CSS bien que les boutons ne sont pas alignés, et est très bien avec jQuery

Hésitez pas à résoudre le bouton CSS line-up peu 🙂

jQuery:

$.fn.equalHeights = function (px) {
    $(this).each(function () {
        var currentTallest = 0;
        $(this).children().each(function (i) {
            if ($(this).height() > currentTallest) {
                currentTallest = $(this).height();
            }
        });
        if (!px && Number.prototype.pxToEm) {
            currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
        }
        //for ie6, set height since min-height isn't supported
        if ($.browser.msie && $.browser.version == 6.0) {
            $(this).children().css({
                'height': currentTallest
            });
        }
        $(this).children().css({
            'min-height': currentTallest + 40 //THIS IS A FRIG - works for jquery but doesn't help CSS only
        });
    });
    return this;
};

$(document).ready(function() {
    var btnstyle = {
    position : 'absolute',
    bottom : '5px',
    left : '10px'
    };
    $('.btn').css(btnstyle);
    var colstyle = {
    marginBottom : '0px',
    paddingBottom : '0px',
    backgroundColor : '#fbf'
    };
    $('.col').css(colstyle);    
    $('.row-fluid').equalHeights();
});

CSS

.col {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#ffb;
    position:relative;
}
.col-wrap {
    overflow: hidden; 
}

.btn{
   margin-left:10px ;   
}
p:last-child {
 margin-bottom:20px ;   
}

jsfiddle - http://jsfiddle.net/brianlmerritt/k8Bkm/