2016-07-28 20 views
0

Gibt es eine Möglichkeit, eine Spalte über einer Spalte mit einer vertikalen Ausrichtung (align-items: center;) innerhalb eines Bootstrap-Grids anzuzeigen?Bootstrap 3: Spalten über Spalten

Dasselbe, dass die Nesting-Spalten horizontal, aber vertikal ausgerichtet sind, wäre schön, wenn es möglich wäre, ohne die Bootstrap-Funktionalität zu zerstören und die absolute Position für das Overlay-Element zu verwenden.

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

Und Ihr Code ist ... – Ionut

+0

vielleicht versuchen, flex http://StackOverflow.com/Questions/19026884/Flexbox-Center-horizontal-und-vertically –

Antwort

0

Gefunden keinen anderen Weg, dann absolut oder über flex

-Code mit Position mit der Position absoluten Element:

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