jquery - 如何正确地将 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');
});

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

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

如果可能，是否有一种纯 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?