Using twitter bootstrap 2.0 - How to make equal co

Question

Does bootstrap 2.0 have any helpers to make .span1, .span2 .... .span12 equal height. I've nested this type of 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>

I would like each well to end up the same height if possible?

Answer 1

The above solutions all work until you add nice bootstrap buttons! How do you position buttons I thought (yes, that was my problem).

I combined the CSS with the jquery answer from How might I force a floating DIV to match the height of another floating DIV?

After a bit of frigging I got this, which works with CSS although the buttons don't line up, and is fine with jQuery

Feel free to fix the CSS button line up bit :)

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/

Answer 2

jQuery's height() method returns the value of the "first element in the set of matched elements". The answer in http://jsfiddle.net/4HxVT/ only works because the first element in the row is also the highest.

Here's another jQuery based solution:

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

(Via this answer: https://stackoverflow.com/a/526316/518535)