Question

这个问题是对how can I make bootstrap columns all the same height的跟进。基于一个建议的solution，我设置了一个js小提琴示例来说明我的问题，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;
}

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

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

是否有可能通过css实现这一目标？或者是javascript唯一的选择？

Answer 1

好吧，我不确定我理解你想要达到的目标，但我可以告诉你为什么头条新闻表现得如此笨拙。您将.container定义为表格，.row表现得像表格行，而.col表现得像表格单元格。但是你把<h2>放在正中间。所以你基本上做的是：

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

浏览器根本不知道如何处理这个问题，这就是为什么你的头条新闻在你的jsfiddle中如此奇怪。将<h2>放在.container之外或另一个.col（位于.row内）。

关于问题的其余部分，你能详细说明一下吗？

Answer 2

如果我理解你的解释，我认为这就是你需要的：

<div class="row">
    <div class="col-md-12"><h2>Heading Content</h2></div>
    <div class="row">
         <div class="col-md-4 classToFixHeight">Column 1</div>
         <div class="col-md-4 classToFixHeight">Column 2</div>
         <div class="col-md-4 classToFixHeight">Column 3</div>
    </div>
</div>

这基本上是对Jan所回答的内容进行了阐述，但更多的是将它与Bootstrap 3联系起来，因为它正是你所使用的。

现在解释一下我的答案，为了让每一行用标题分隔，你需要指定你希望列进入下一行而不是与你的标题相同。您可以通过bootstrap的.row轻松完成此操作。我甚至用<h2>包裹.col-md-12来迫使它占据整行。

相同高度的bootstrap列，不会破坏布局

2 个答案: