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解决了这个问题。下面的片段均衡了我的井的高度和出现在给定行上的警报，无论最高的出现在哪里：

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

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

8 个答案: