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

为什么这不按照应有的方式运作？并不是比这样做更好的方法吗？

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

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

1 个答案: