Jquery 如何正确设置引导'；将列类设置为等高

考虑以下标记：

<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>

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

.col

s

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

---

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

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

或在此：

---

是的，我知道，但它们并不是真正的最佳选择，而且它们似乎都无法处理在专栏中添加图像的问题。flex解决方案似乎是最好的，我发现只要显示：-webkit-box；修复了chrome和safari的问题，但没有修复IE和Firefox的问题。只要我添加display:flex；它将我的图像压缩在一起，从而破坏了我的图像。在查看解决方案之后，我可能更喜欢JS解决方案，因为CSS解决方案似乎都不能正常工作。这也让我回到了最初的问题，为什么我的脚本不能工作？

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');
});