html - 如何将一行中的所有 Bootstrap 3 单元格设置为相同的高度

Question

我有一个内容可变的可翻转卡片网格，并尝试将内容较少的卡片的高度设置为与内容最多的卡片相同的值。但无论我将 height:100% 应用到哪个框/单元格，较小的单元格都会保持所需的大小。我可以看到行本身自然具有最大高度，但为什么所有子单元格不能继承该高度？

示例如下:http://www.bootply.com/NnHFEKwrwu

Answer 1

要理解 height，这只会占用所应用的指定 height，这意味着如果您的容器元素的高度为 300px，并且该子元素因此具有 CSS height:100%，那么该子元素将采用该高度。

在您的情况下，您确实没有在任何元素上指定 height，只有 height:100% 和 min-height:100% 。更有可能的是，您的 min-height 将始终是一个设定值，即 px、em 等。

我假设您想要的是让所有框的高度相同。如果是这种情况，那么您可以看到我发布的先前答案 here .目标是获取所有 XX 元素(您想要分组)，并确定该组的 max-height。然后，我们将此 height 应用于组中的所有元素。

当您希望轮播、模态框、工具提示，或者在您的情况下，列在整个高度相同，从而使您的布局看起来更漂亮时，这种情况经常发生。

在您的情况下，您希望遍历所有 .card 元素并获取这些元素的最大高度，然后将其应用于组。我喜欢使用 outerHeight() b/c 这也会得到 border、padding 和 margin。

var maxHeightOfCards = $('.card').map(function() {
    return $(this).outerHeight();
  }).get();

// or use $('.card').css('height', Math.max.apply(null, maxHeightOfCards))
$('.card').height(Math.max.apply(null, maxHeightOfCards));