html - 如何在 Bootstrap 3 中创建(双？)嵌套行并垂直对齐？

Question

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

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

vertical-align: middle;

没有用，除非我忽略了一些非常简单的放置位置？

下面是简化的代码，但代码笔链接将最挑衅地帮助说明问题。

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结构，然后改变他们的类。你必须用一个 div(.col-sm-6) 包装 slide(.col-sm-6) 的所有父级，然后将 .col-sm-6 更改为 .col-sm-12。不过，我解决了你的问题，为了垂直居中，我使用了 display: flex;。

Codepen