我正在使用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>
答案 0 :(得分:0)
您应该更改您的html结构,然后更改其类。您必须将slide
(.col-sm-6
)的所有父母包裹为div(.col-sm-6
),然后将.col-sm-6
更改为.col-sm-12
。但是,我修复了您的问题,并且为了垂直居中,我使用了display: flex;
。