使用 twitter bootstrap 2.0 - 如何使列高相等？

Question

bootstrap 2.0 是否有帮助 .span1、.span2 .... .span12 等高。我已经嵌套了这种类型的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>

如果可能的话，我希望每口井都达到相同的高度？

Answer 1

这是一个响应式 CSS 解决方案，基于为每一列添加一个大的填充和同样大的负边距，然后将整行包装在一个隐藏溢出的类中。

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

.col-wrap{  
    overflow: hidden;   
}

你可以在jsFiddle看到它的工作原理

编辑

在回答问题时，如果您需要等高的井或等高的圆角柱，这里有一个变体：http://jsfiddle.net/panchroma/4Pyhj/

编辑

回答一个问题，这里和Bootstrap 3中的技术一样，原理一样，只是更新Bootstap网格中的类名：http://jsfiddle.net/panchroma/bj4ys/embedded/result/

Answer 2

尝试这样的事情（虽然不是很优雅）：

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

jQuerys height() 方法在选择多个元素时返回最大值。

查看 jsFiddle： http://jsfiddle.net/4HxVT/

Answer 3

jQuery 的 height() 方法返回“匹配元素集中的第一个元素”的值。 http://jsfiddle.net/4HxVT/ 中的答案仅有效，因为该行中的第一个元素也是最高的。

这是另一个基于 jQuery 的解决方案：

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

（通过这个答案：https://stackoverflow.com/a/526316/518535）

Answer 4

扩展已经给出的答案，我刚刚使用jquery 和underscore 解决了这个问题。下面的 sn-p 使我的井的高度和出现在给定行上的警报相等，无论最高的出现在哪里：

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

Answer 6

我用一个自定义的 jQuery max 插件解决了这个问题：

$.fn.max = function(selector) { 
    return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get() ); 
}

这里 content-box 是我的内部列元素，content-container 是包含列的包装器：

$('.content-box').height(function () {
  var maxHeight = $(this).closest('.content-container').find('.content-box')
                  .max( function () {
                    return $(this).height();
                  });
  return maxHeight;
})

Answer 7

在您添加漂亮的引导按钮之前，上述解决方案都有效！你如何定位我认为的按钮（是的，这是我的问题）。

我将 CSS 与来自 How might I force a floating DIV to match the height of another floating DIV? 的 jquery 答案结合起来

经过一番折腾，我得到了这个，虽然按钮不对齐，但它适用于 CSS，并且适用于 jQuery

请随意修复 CSS 按钮排列位 :)

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 8

这是我的 2 列解决方案（适应更多列很简单，只需添加更多条件）。 在 load 事件上运行以获得所有元素的正确高度。

$(window).on('load', function () { 
    var left = $('.left');
    var leftHeight = left.height();
    var right = $('.right');
    var rightHeight = right.height();

    // Width like mobile, the height calculation is not needed
    if ($(window).width() <= 751)
    {
        if (leftHeight > rightHeight) {
            right.css({
                'height': 'auto'
            });
        }
        else {
            left.css({
                'height': 'auto'
            });
        }

        return;
    }

    if (leftHeight > rightHeight) {
        right.css({
            'height': leftHeight
        });
    }
    else {
        left.css({
            'height': rightHeight
        });
    }
});

<div class="row">
    <div class="span4 left"></div>
    <div class="span8 right"></div>
</div>