使用 bootstrap 3 垂直对齐中间内容

我想使用最新的引导程序在 div 块中设置垂直中间内容v3.2.0.

我已阅读答案与 bootstrap 3 垂直对齐，但它使用float:none;在 div 块中。

但是，我can't use float:none;根据我们的布局在 div 块中。

我有这个代码：

<div class="container">
  <div class="col-lg-4">....</div>
  <div class="col-lg-5">....</div>
  <div class="col-lg-3">....</div>
</div>

块1中的内容高度是动态的。我想根据块1的高度设置块2和块3中的垂直中间内容。

这是我们的布局目前的样子：

       Block 1           Block 2            Block 3
 ------------------ ------------------ ------------------
|  Content Height  |      Content     |      Content     |
|        is        |------------------ ------------------
|     Dynamic      | 
 ------------------ 

如果，我会用float:none;所以，这是我们的布局：

       Block 1           Block 2        
 ------------------ ------------------ 
|  Content Height  |                  |
|        is        |      Content     |
|     Dynamic      |                  |
 ------------------ ------------------ 
       Block 3
 ------------------
|      Content     |
 ------------------

这就是我希望它看起来的样子：

       Block 1           Block 2            Block 3
 ------------------ ------------------ ------------------
|  Content Height  |                  |                  |
|        is        |      Content     |      Content     |
|     Dynamic      |                  |                  |
 ------------------ ------------------ ------------------

我发现实现这一目标的最佳方法是在容器内创建表格布局：

看看这个小提琴：http://jsfiddle.net/StephanWagner/Zn79G/9/embedded/result

<div class="container">
  <div class="table-container">
    <div class="col-table-cell col-lg-4">A<br>A<br>A<br>A<br>A<br>A<br>A</div>
    <div class="col-table-cell col-lg-5">B</div>
    <div class="col-table-cell col-lg-3">C</div>
  </div>
</div>

@media (min-width: 1200px) {

     .table-container {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .table-container .col-table-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
}

媒体查询确保内容仅是大型显示器中的表格，否则它将像以前一样堆叠。