等高列内的引导等高行

Question

我得到了一个设计，其中有 4 列需要等高。仅此一项还不错，我觉得我已经能够使用引用 here 的 One True Layout 方法解决该问题：

<style>
    .row {
        overflow: hidden;
    }

    .block {
        margin-bottom: -99999px;
        padding-bottom: 99999px;
    }
</style>  


<div class="row">
    <div class="block">
        <div class="content">
            Content goes here, and each .block element should have the same height.
        </div>
    </div>
    <div class="block">
        <div class="content">
            Content goes here, and each .block element should have the same height.
        </div>
    </div>
    ...
</div>

然而，复杂之处在于这些列中的每一个都有 3 行，我需要这些行中的每一行与它们的表兄弟的高度相同。 IE。所有的 A div 需要相等的高度，所有的 B 等于最大的 B，等等。

 ------------   ------------   ------------   ------------
|            | |            |  |           |  |           |
|     A1     | |     A2     |  |     A3    |  |     A4    |
|            | |            |  |           |  |           |
 ------------   ------------   ------------   ------------
|            | |            |  |           |  |           |
|            | |            |  |           |  |           |
|     B1     | |     B2     |  |     B3    |  |     B4    |
|            | |            |  |           |  |           |
|            | |            |  |           |  |           |
 ------------   ------------   ------------   ------------
|     C1     | |     C2     |  |     C3    |  |     C4    |
|            | |            |  |           |  |           |
 ------------   ------------   ------------   ------------

每个块内的内容只是文本或无序列表。

我发现如果我将所有 As、B 和 C 与它们各自的块一起包装在一行中，我可以完成这项工作，但是我一直无法找到解决方案来完成这项工作下到更窄的断点时响应。所有的 As 将首先堆叠在一起，然后是 Bs，然后是 Cs，当我正在寻找的是所有列都保持在一起时，堆叠为 A1、B1、C1、A2、B2， C2等

我也尝试过使用偏移列，并使用引导程序推送和拉取类重新排序它们，但没有任何效果。

我们还需要为这个站点支持 IE9，所以 flexbox 很遗憾没有了。

上图是大视口应显示的内容，每列从引导网格中取 3 列。小视口应该缩小到 2x2，每列 6 列，而超小视口只会让它们一个在另一个之上堆叠，占满 12 列。

编辑：我更喜欢纯粹的 CSS 解决方案，如果可能的话不求助于表格。但我并没有坚决反对它，也没有排除 Javascript。

Answer 1

虽然这可能需要更多的工作，但您可以将它们定义为三个单独的列，都在一行内。例如：

    <div class="row">
   <div class="col-xs-12 col-sm-4">
      <div class="row A">
         <div class="col-xs-12">
         A1
         </div>
      </div>
      <div class="row B">
         <div class="col-xs-12">
         B1
         </div>
      </div>
      <div class="row C">
         <div class="col-xs-12">
         C1
         </div>
      </div>
   </div>
   <div class="col-xs-12 col-sm-4">
      <div class="row A">
         <div class="col-xs-12">
         A2
         </div>
      </div>
      <div class="row B">
         <div class="col-xs-12">
         B2
         </div>
      </div>
      <div class="row C">
         <div class="col-xs-12">
         C2
         </div>
      </div>
   </div>
   <div class="col-xs-12 col-sm-4">
      <div class="row A">
         <div class="col-xs-12">
         A3
         </div>
      </div>
      <div class="row B">
         <div class="col-xs-12">
         B3
         </div>
      </div>
      <div class="row C">
         <div class="col-xs-12">
         C3
         </div>
      </div>
   </div>
</div>

还有下面的css：

.A{
    height:50px;
}
.B{
    height:90px;

}
.C{
    height:40px;
}

Here is a jsfiddle to show you what I'm trying to do.如果这就是你要找的东西，请告诉我。

Here is a jsfiddle with JQuery that should solve your problem.