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

Question

Ne bootstrap 2.0 ont toutes les aides à apporter .span1, .span2 .... .span12 égale hauteur. J'ai imbriqué ce type de html

<div class='container'>
  <div class='row'>
    <div class='span2'>
      <div class='well'>
        XXXX
      </div>
    </div>
    <div class='span2'>
      <div class='well'>
        XXXX
        XXXX
      </div>
    </div>
    <div class='span2'>
      <div class='well'>
        XXXX
        XXXX
        XXXX
      </div>
    </div>
  </div>
</div>

Je voudrais que chaque bien à la fin de la même hauteur si possible?

Answer 1

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 de la grille: http://jsfiddle.net/panchroma/bj4ys/embedded/result/

Answer 2

Essayez quelque chose comme ça (pas très élégant, tout de même):

$('.well').css({
    'height': $('.well').height()
});

Le jQuerys height() méthode renvoie la valeur la plus élevée lorsque plusieurs éléments sont sélectionnés.

Voir le jsFiddle: http://jsfiddle.net/4HxVT/

Answer 3

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: http://stackoverflow.com/a/526316/518535)

Answer 4

S'attardant sur les réponses déjà données, j'ai juste réglé ce problème à l'aide de jquery et de soulignement. L'extrait de code ci-dessous égale à la hauteur de mon puits et des alertes qui apparaissent sur une ligne donnée, indépendamment de l'endroit où le plus haut apparaît:

$('.well, .alert').height(function () {
    var h = _.max($(this).closest('.row').find('.well, .alert'), function (elem, index, list) {
        return $(elem).height();
    });
    return $(h).height();
});

Answer 5

$.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();