Wie Spalten in der Höhe gleich in Bootstrap ohne js/Überlauflösung machen

Question

Bitte lesen Sie meine Frage vor

Ich habe Bootstrap-Behälter doppelte Markierung, in denen ich einige Spalten haben. Ich möchte die gleiche Höhe für alle div.

Was ich habe, ist this, aber es wird die Struktur brechen, während die Größenänderung bedeutet, nicht voll mit Reaktionsfähigkeit zu verwenden.

Ich weiß, es gibt zwei Haupt Lösung für sie:

1. Flex
2. Tabelle/table-cell

Aber beide sind für mich nicht sinnvoll. Ich habe auch overflow:hidden und margin-bottom: -99999px;padding-bottom: 99999px; Lösung verwendet, aber nicht nützlich für mich.

Lösung ich habe versucht: This, this, and this aber keiner von ihnen ist nützlich für mich.

Ich habe einfach erstellt fiddle (durch irgendeine Antwort), aber wenn ich versuche, den gleichen Weg in meiner Geige zu verwenden, dann gibt es nicht die gleiche Ausgabe, weiß nicht warum.

Ich habe gelesen this Tutorial und ging durch this auch zu mehr über Flex wissen, aber keiner von ihnen ist nützlich für mich.

Also meine endgültige fiddle ist dies. Bitte überprüfen Sie dieses und lassen Sie mich wissen, wie ich es reaktionsfähig machen kann, während ich die gleiche Höhe halte.

css

.bg-gray { 
    color: #666; 
    background: #efefef; 
} 
.mrg10T { 
    margin-top: 10px !important; 
} 
.mrg10A { 
    margin: 10px !important; 
} 
.csT 
{ 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    text-align: center; 

} 
.csT div div{height:100%;} 

Html

<div class="row mrg10T csT"> 
     <div class="text-left col-md-4 thisclass"> 
     <div class="row bg-gray pad5A mrg10A"> 
      <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Current subscription</div><div class="col-md-6 col-sm-6 col-xs-6">: Student Demo</div> 
     </div> 
     </div> 
     <div class="text-left col-md-4 thisclass"> 
     <div class="row bg-gray pad5A mrg10A"> 
      <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Start date</div><div class="col-md-6 col-sm-6 col-xs-6">: 1st-Jan-2016</div> 
     </div> 
     </div> 
     <div class="text-left col-md-4 thisclass"> 
     <div class="row bg-gray pad5A mrg10A"> 
      <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Expiry date</div><div class="col-md-6 col-sm-6 col-xs-6">: 31st-Dec-2016</div> 
     </div> 
     </div> 
     <div style="clear:both;"> 

     </div> 
     </div> 
     <div class="row mrg10T csT"> 
     <div class="text-left col-md-4 thisclass"> 
     <div class="row bg-gray pad5A mrg10A"> 
      <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Renewal pricing</div><div class="col-md-6 col-sm-6 col-xs-6">: $100</div> 
     </div> 
     </div> 
     <div class="text-left col-md-4 thisclass"> 
     <div class="row bg-gray pad5A mrg10A"> 
      <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Offers 1</div><div class="col-md-6 col-sm-6 col-xs-6">: 20% cash incentive (will be credited to your account)</div> 
     </div> 
     </div> 
     <div class="text-left col-md-4 thisclass"> 
     <div class="row bg-gray pad5A mrg10A"> 
      <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Renewal pricing</div><div class="col-md-6 col-sm-6 col-xs-6">: $100</div> 
     </div> 
     </div> 
     <div style="clear:both;"> 

     </div> 
    </div> 

Answer 1

macht diese Arbeit für Sie ..

.csT 
{ 
    display: inline; 
    flex-wrap: wrap; 
    justify-content: center; 
    text-align: center; 
} 

.csT div div{height:100%;} 
.thisclass{height:100px;} 

DEMO https://jsfiddle.net/norcaljohnny/jeaxycv8/2/