Question

有没有办法在引导网格内的垂直对齐（align-items：center;）列上显示列？

与嵌套列水平但具有垂直对齐相同，如果有可能不破坏引导功能并使用叠加元素的绝对位置，那将是很好的。

<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>

Answer 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>

Bootstrap 3：列上的列

1 个答案: