垂直对齐中间内容与引导程序 3

Question

我想使用最新的 bootstrap v3.2.0在 div 块中设置垂直中间内容。

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

但是，根据我们的布局，我不能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中设置垂直中间的内容。

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

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

如果，我将使用float:none;所以，这是我们的布局看起来：

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

这是我希望它的外观：

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

Answer 1

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

看看这个小提琴：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;
    }
}

媒体查询确保内容只会是大屏幕中的表格，否则会像以前一样堆叠。