将 bootstrap 列拆分为高度相等的 n 行，填充父级高度

Question

我对 Bootstrap 很陌生，我grid在尝试重现以下模板时遇到了系统问题：

在这个例子中，我有 3 列：

1. 第一列包含一些信息/图片。该列包含大量数据。
2. 第二列包含 3 个（但可能是 n 个）联系信息（电子邮件、地址、电话号码等）
3. 第三列包含一些随机信息

我想将第二列分成 3 行，高度相等。我需要做的是将这 3 行垂直居中在第二列，并可能扩展它们的高度以填充父（第二列）高度。

这是我迄今为止取得的成就的一个例子：

<div class="row container">
  <div class="col-md-4 first">
    <p> ... VERY LONG CONTENT ... </p></div>
  <div class="col-md-4 second">
    <div class="row">
      Telephone number
    </div>
    <div class="row">
      Address
    </div>
    <div class="row">
      email
    </div>
  </div>
  <div class="col-md-4 third">
    Something else, vertically centered
  </div>
</div>

在这里找到一个带有我的代码的引导

作为替代方案，我也很乐意使用<ul>.

我怎样才能做到这一点？是否有任何引导类可以应用于所有 3 行，以使它们完全填充父高度？

先感谢您

Answer 1

我添加了 css 样式来将列固定到位，如这个答案所示：

.row {
    overflow: hidden; 
}
[class*="col-"] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

为了填充中间列的高度，我添加了 javascript，它计算左列的高度并将其重新分配到中间列的行：

$(".parent").each(function(){
    var $children = $(this).children();
    $children.height($(".height_parent").height() / $children.length - 2);
});

在 HTML 中parent，类添加到中间列 div，height_parent类添加到左列 div。

这是更新的bootply。