Bootstrap 3：列上的列答案

【问题标题】：Bootstrap 3: columns over columnsBootstrap 3：列上的列
【发布时间】：2016-12-02 23:06:43
【问题描述】：

有没有办法在引导网格内垂直对齐（对齐项目：中心；）的列上显示一列？

与嵌套列水平对齐但垂直对齐相同，如果有可能不破坏引导功能并使用绝对位置作为覆盖元素，那就太好了。

<div class="row row-margin-bottom-100px">
<div class="row">
  <div class="col-xs-8 col-sm-6">
    Level 2: .col-xs-8 .col-sm-6
  </div>
  <div class="col-xs-4 col-sm-6">
    Level 2: .col-xs-4 .col-sm-6
  </div>
</div>

<div class="col-lg-6 col-padding-zero wow bounceInUp" >
    <img alt="" src="images/img01.jpg" style="width: 100%">
</div>
<div class="col-lg-6 col-padding-zero wow bounceInRight" >
    <img alt="" src="images/img02.jpg" style="width: 100%">
</div>

【问题讨论】：

你的代码是……
也许可以试试 flex stackoverflow.com/questions/19026884/…

标签： html css twitter-bootstrap

【解决方案1】：

除了使用绝对位置或通过flex没有其他方法

带有绝对位置元素的代码：

<div class="row row-margin-bottom-100px">
<div class="row" style="position: absolute; z-index: 5000; width: 100%; top: 50%;">
  <div class="col-xs-8 col-sm-6">
    Level 2: .col-xs-8 .col-sm-6
  </div>
  <div class="col-xs-4 col-sm-6">
    Level 2: .col-xs-4 .col-sm-6
  </div>
</div>

<div class="col-lg-6 col-padding-zero wow bounceInUp" >
    <img alt="" src="images/img01.jpg" style="width: 100%">
</div>
<div class="col-lg-6 col-padding-zero wow bounceInRight" >
    <img alt="" src="images/img02.jpg" style="width: 100%">
</div>

【讨论】：