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

时间:2015-11-14 05:48:18

标签: html css twitter-bootstrap

我正在使用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>

1 个答案:

答案 0 :(得分:0)

您应该更改您的html结构,然后更改其类。您必须将slide.col-sm-6)的所有父母包裹为div(.col-sm-6),然后将.col-sm-6更改为.col-sm-12。但是,我修复了您的问题,并且为了垂直居中,我使用了display: flex;

Codepen