2016-07-28 2 views
0

есть способ отображения столбца над столбцом с вертикальным выравниванием (выравнивание: центр;) внутри сетки бутстрапа?Bootstrap 3: столбцы над столбцами

То же самое, что столбцы Nesting горизонтальны, но с вертикальным выравниванием, было бы неплохо, если бы была возможность без разрушения функциональности бутстрапа и использование позиции абсолютной для элемента overlay.

example image

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

+0

И ваш код ... – Ionut

+0

Возможно, попробуйте flex http://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically –

ответ

0

Найдено другого пути нет, то используя позицию абсолютного или с помощью 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> 

Смежные вопросы