Question

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

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

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

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

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

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/

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

Answer 3

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

当然，你必须知道列的预期高度，但它是一个免费的解决方案。

有没有办法让行类中的所有元素都具有相同的高度？

3 个答案: