Mögliche zu Bootstrap-Spalten auf die gleiche Höhe zu zwingen & vertikal divs + cross Unterstützung

Question

So ausrichten, ich versuche folgendes zu tun:

• Set Spalten in Bootstrap auf gleicher Höhe, unabhängig von Inhalt
• Dann vertikal auszurichten, um den Inhalt innerhalb dieser Spalten zu zentrieren
• Und dies alles Cross-Browser kompatibel sein (zum IE min threshold, 10+) machen

die ersten 2 Stufen mit FlexBox recht einfach sind, aber sie l Achten Sie darauf, dass der Inhalt bei IE 10+ in meinen Browserstack-Tests normal aussieht.

Kennt jemand, wie man das macht? Hier ist ein Codepen meines aktuellen Codes, der Probleme mit banestack hat: http://codepen.io/myriad1729/pen/JRGVZO (HTML/CSS unten)

Sie werden sehen, es funktioniert mit jedem modernen Browser, aber auf IE11, scheint die zweite Spalte im Wesentlichen ein ganzes gedrückt werden Reihe, alles sieht gut aus, nicht großartig, Bob.

Ich würde es sehr schätzen, wenn jemand hier einen Einblick hat, ob es eine einfache One-Stop-Shop-Lösung gibt, die ich übersehen habe, wenn es ein Problem in meinem CSS gibt, das dieses Problem auf IE10/11 verursacht oder wenn die Lösung ist, IE10/11 gezielt anzusprechen und ... etwas zu tun.

Danke!

CSS/HTML:

// And add in pertinent Bootstrap CSS 
 

 
.row { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-items: center; 
 
} 
 

 
[class*="col-"] { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.itemSource { 
 
    margin: 0; 
 
} 
 

 
h2 { 
 
    margin-top: 4rem; 
 
    font-size: 1.2em; 
 
    letter-spacing: 0; 
 
    margin-bottom: 2rem; 
 
    text-transform: uppercase; 
 
    color: #555; 
 
    font-weight: 300; 
 
} 
 

 
p { 
 
    font-size: 1em; 
 
    font-weight: 400; 
 
}

<section class="listEntries"> 
 
    <div class="row"> <!-- Caleb --> 
 
    <div class="col-xs-offset-3 col-xs-6 col-sm-offset-4 col-sm-4 col-md-offset-1 col-md-3 col-lg-offset-2 col-lg-2"> 
 
     <img src="http://c51e0534b271998a1a94-58706dfbc342bfcb8f938b36c845fe8a.r14.cf1.rackcdn.com/uploads/first-person-sharing-our-story.jpg" class="img-circle img-responsive"> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-offset-1 col-sm-10 col-md-offset-0 col-md-8 col-lg-6"> 
 
     <div class="itemSource"> 
 
     <h2><strong>George Costanza</strong> Director</h2> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum bibendum justo, et gravida orci bibendum in. Nunc ornare nulla non eros ultrices vestibulum. Suspendisse vitae libero in ligula laoreet sodales. Vivamus in tortor et nulla euismod congue. Phasellus nec semper tellus. Sed sagittis magna id orci placerat, eget aliquet ante tincidunt. Suspendisse vitae mattis elit, in aliquam sem. Nunc efficitur finibus lorem, eu lobortis ante condimentum id. Aenean id augue ut turpis tincidunt viverra. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

Ich benutze diese Lösung für dieses Problem

Ohne JavaScript.

Ich fand es auf this link.

<div class="row row-flex row-flex-wrap"> 
    //Your well code 
</div> 

und fügen Sie diese CSS:

.row-flex, .row-flex > div[class*='col-'] { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    flex:1 1 auto; 
} 

.row-flex-wrap { 
    -webkit-flex-flow: row wrap; 
    align-content: flex-start; 
    flex:0; 
} 

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] { 
    margin:-.2px; /* hack adjust for wrapping */ 
} 

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div { 
    width:100%; 
} 


.flex-col { 
    display: flex; 
    display: -webkit-flex; 
    flex: 1 100%; 
    flex-flow: column nowrap; 
} 

.flex-grow { 
    display: flex; 
    -webkit-flex: 2; 
    flex: 2; 
} 

Hope this hilfsbereit wird.