css - 在不破坏布局的情况下引导相同高度的列

Question

此问题是 how can I make bootstrap columns all the same height 的后续问题.基于一个建议solution我设置了一个 js fiddle 示例来说明我的问题，http://jsfiddle.net/4d666/

<div class="container">
    <div><h2 class="hero">a very long title</h2></div>
    <div class="row">
        <div class="col-md-4" style="border: 1px solid black;">
        <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
        <div class="col-md-4" style="border: 1px solid black;">
            <p>foo</p>
        </div>
        <div class="col-md-4" style="border: 1px solid black;">
            <p>foo</p>
        </div>
    </div>
    <div><h2 class="hero">a very long title</h2></div>

    <div class="row">
        <div class="col-md-4" style="border: 1px solid black;">
            <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        </div>
        <div class="col-md-4" style="border: 1px solid black;">
            <p>foo</p>
        </div>     
    </div>
</div>

以及相应的 css 灵感来自 bootstrap 3 responsive columns of same height .

/* try to remove this css to see the effect */

.container{
    display:table;
}

.row {
    display: table-row;
}

.row [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

fiddle 中的 html 显示了我的目标:我有一个带有标题和行的容器，并且希望列按高度对齐。标题和行应左对齐。当您在没有 css 的情况下运行 fiddle 时，您将看到基本思想(在这种情况下，列的大小将不同)。您可以调整结果面板的大小以查看列在彼此下方折叠(如预期的那样，当屏幕变得太小时)。当您使用 css 运行 fiddle 时，您会注意到 h2 文本在每个单词后中断并且不再与列对齐。同时调整面板的大小会使列变得非常小，但不会再破坏它们。

我修改了 fiddle 以包含可以找到的原始答案 here .这次 h2 正确对齐，但第二行与第一行不对齐。此外，当您调整结果面板大小时，列不会再折叠。

是否可以通过 css 实现？还是 JavaScript 是唯一的选择？

Answer 1

好吧，我不确定我是否理解您想要实现的目标，但我可以告诉您为什么头条新闻表现得如此尴尬。您正在定义您的 .container表现得像一张 table ，你的 .row表现得像一个表行，而你的 .col表现得像一个表格单元格。但是你把你的 <h2>就在中间。所以你基本上做的是这样的:

<table>
  <h2>...</h2>
  <tr>
    <td>...</td>
  </tr>
</table>

浏览器根本不知道如何处理这个，这就是为什么你的标题在你的 jsfiddle 中表现得如此奇怪。把 <h2>在 .container 之外或者在另一个.col (在 .row 内)。

至于剩下的问题，你能再详细一点吗？