Bootstrap Layout Verschachtelung?

Question

Ich bin ziemlich neu zu Bootstrap und Probleme mit der Verschachtelung. Ich habe ein Layout, das ich neu erstellen möchte und nicht das richtige Ergebnis hier layout image.

Mein Code http://www.bootply.com/0BETlZMU7T

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-4">image with image text here</div> 
    <div class="col-md-8"> 
     <div class="row"> 
      <div class="col-md-6">A Text</div> 
      <div class="col-md-6">B Text</div> 
     </div> 
     <div class="row"> 
      <div class="col-md-6">Y Text</div> 
      <div class="col-md-6">Z Text</div> 
     </div> 
    </div> 
    </div> 
</div>` 

Answer 1

vertikale align ist mit Standard-Bootstrap nicht möglich, aber man kann es mit dem Code achive in dieser Lösung zeigte vertical-align with Bootstrap 3

Ihre updatetd html wie folgt aussehen:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-4">image with image text here</div> 
     <div class="col-md-8"> 
      <div class="row"> 
       <div class="col-md-6">A Text</div> 
       <div class="col-md-6">B Text</div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6">Y Text</div> 
       <div class="col-md-6">Z Text</div> 
      </div> 
     </div> 
    </div> 
</div> 

Und Ihre CSS wie:

/*From: 
    https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3#answer-25517025 
*/ 
.vertical-align { 
    display: flex; 
    flex-direction: row; 
} 

.vertical-align > [class^="col-"], 
.vertical-align > [class*=" col-"] { 
    display: flex; 
    align-items: center; 
    justify-content: center; /* Optional, to align inner items 
           horizontally inside the column */ 
} 

/** 
* "flex: 1" or "flex-grow: 1" is added to make the inner div 
* - Which is also a flex-item - take up all the horizontal space 
* available space inside the flex container (.col-* elements) 
*/ 
.vertical-align > [class^="col-"] > div, 
.vertical-align > [class*=" col-"] > div { 
    /* flex: 1; */ 
    flex-grow: 1; 
} 

Ich habe dir ein Beispiel mit deinem Code gemacht und die Items "A, B, X, Y" in eine Zeile zusammengefügt, weil du diese zweite Zeile nicht brauchst.

http://www.bootply.com/uIVbiDLGkj