twitter-bootstrap - 有没有办法使行类中的所有元素都具有相同的高度？

Question

在 Bootstrap 中，是否有一种简单的方法可以使一行中的所有 span 元素具有相同的高度，即最高元素的高度？

这是我的意思的一个例子。

http://jsfiddle.net/DVnZ6/

Answer 1

你可以使用 jQuery 来做到这一点：

boxes = $('.well');
maxHeight = Math.max.apply(
  Math, boxes.map(function() {
    return $(this).height();
}).get());
boxes.height(maxHeight);

这是一个例子：http: //jsfiddle.net/DVnZ6/3/

Answer 2

必须将调整大小事件添加到此代码中，因为在大多数情况下，内容的高度因不同的分辨率而异，并且会产生不必要的设计问题，例如溢出的文本。

这是一个更完整的代码版本，它也支持调整大小

jQuery(function () {

    equalMaxWidth = 500; /* Customize viewport width - for resolutions below this number, the height equalizing will not work */
    boxes = jQuery('.well');

    boxes.removeAttr('style');
    if(jQuery(window).width() > equalMaxWidth){
        equalBoxHeights(boxes);
    };

    window.onresize = function () {
        boxes.removeAttr('style');
        console.log( jQuery(window).width());
        if(jQuery(window).width() > equalMaxWidth){
            equalBoxHeights(boxes);
        };
    };
});

function equalBoxHeights(boxes) {
    maxHeight = Math.max.apply(
            Math, boxes.map(function () {
                return jQuery(this).height();
            }).get());
    boxes.height(maxHeight);
}

检查 jsFiddle http://jsfiddle.net/o4w7tjtz/上的演示

提示：尝试调整第三个垂直框架的大小（注意到大约 500pw 宽度的高度相等？）

Answer 3

如果将跨度的高度设置为 100%，并将行的高度设置为固定值，它们都将匹配容器的高度。

当然，您必须知道列的预期高度，但它是一个无 js 的解决方案。