如何正确地将 Bootstrap 的列类设置为相等的高度

Question

考虑这个标记：

<div class="row">
  <div class="col-xs-4">
    <img src="somesource.png">
  </div>
  <div class="col-xs-6">
    <h1>Some text</h1>
  </div>
  <div class="col-xs-2">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </div>
</div>

如果图像的高度约为100px，其余的则更少。你应该如何正确地将它们设置为相等的高度而不在所有它们上设置硬编码值 height 属性？

列应该能够在其中包含absolute 定位的元素，并且仍然与其他列具有相同的高度。

我尝试为此编写一个脚本，但是，无论我做什么，列的高度都没有得到正确的值。脚本如下所示：

var highest = 0,
    columns = $('.row').find('> div[class*="col"]');

$.each(columns, function() {

  var height = $(this).height();

  if (height > highest) {
    highest = height;
  }
});

$.each(columns, function() {
  $(this).css('height', highest + 'px');
});

但是，此脚本似乎选择了最低高度，然后将该高度应用于所有 .cols。

为什么这不按应有的方式工作？难道没有比这样更好的方法吗？

如果可能，是否有一种纯 CSS 方式来获得这种行为？最好不使用类似表格的 CSS 规则。

Answer 1

您可以在 StackOverflow 中已回答的问题中找到该问题的答案：

Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row

或者这里：

How can I make Bootstrap columns all the same height?