如何在Bootstrap 3中创建（double？）嵌套行并垂直对齐？

Question

我正在使用Bootstrap 3.3.4，我无法弄清楚如何在两列的每一边嵌套一列。我可以得到左侧和中间两个.col-sm-6，但最右边的列不会垂直对齐顶部。

中间的列也是文字覆盖的图像，我似乎无法弄清楚如何垂直对齐文本。

vertical-align: middle; 

没有工作，除非我忽略了一些非常简单的地方放置它？

这里是下面的简化代码，但codepen链接将最挑衅有助于说明问题。

http://codepen.io/ethanethan/pen/NGeoqp

<section> 

    <div class="container"> 
     <div class="row"> 



    <!-- tall left column ad --> 
      <div class="col-sm-3 ads"> 
       <h1>Ad Placed on the Left!</h1> 
      </div> 


<div class="col-sm-6"> 
    <div class="row"> 

    <!-- img 1 --> 
      <div class="col-sm-6"></div> 

    <!-- img 2 --> 
      <div class="col-sm-6"></div> 

    </div> 
</div> 


<div class="col-sm-6"> 
    <div class="row"> 

    <!-- img 3 --> 
      <div class="col-sm-6"></div> 

    <!-- img 4 --> 
      <div class="col-sm-6"></div> 

    </div> 
</div> 

<div class="col-sm-6"> 
    <div class="row"> 

    <!-- img 5 --> 
      <div class="col-sm-6"></div> 

    <!-- img 6 --> 
      <div class="col-sm-6"></div> 

    </div> 
</div> 

    <!-- tall left column ad --> 
      <div class="col-sm-3 ads"> 
       <h1>Ad Placed on the Right!</h1> 
      </div> 



     </div> 
    </div> 

</section> 

Answer 1

你应该改变你的HTML结构，然后改变自己的班级。您必须将slide（.col-sm-6）的所有父母除以格（.col-sm-6），然后将.col-sm-6更改为.col-sm-12。不过，我解决了你的问题，并且为了垂直居中，我使用了display: flex;。

Codepen