Bootstrap 3 Grille comment faire des colonnes imbriquées de la même hauteur que la plus grande

Question

J'essaie d'obtenir le bootstrap 3 pour m'assurer que toutes les colonnes ont la même hauteur sur la page.

Je peux obtenir que cela fonctionne quand j'ai 3 colonnes un peu comme l'exemple ici: How can I make Bootstrap columns all the same height?

La question que j'ai est que je veux avoir des colonnes imbriquées et ces colonnes imbriquées devront être x% chacun égalant jusqu'à 100% de la hauteur de la plus grande colonne parente. Je n'arrive pas à trouver une solution aux colonnes imbriquées.

J'ai donc besoin des colonnes imbriquées pour remplir leur colonne parente en fonction du pourcentage de hauteur fourni aux colonnes imbriquées css.

Le pourcentage de la hauteur css sera assurée par jquery Css()

.row { 
    display: table; 
} 

.row [class*="col-"] { 
    float: none; 
    display: table-cell; 
    vertical-align: top; 
} 

<div class="container"> 
<div class="row"> 
    <div class="col-sm-3 "> 
    <img src="http://placehold.it/250x450"> 
    </div> 
    <div class="col-sm-3 " style="background-color: grey"> 
    <div class="row"> 
     <div class="col-sm-12 " style="background-color: green">30%</div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12 " style="background-color: blue">20%</div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12 " style="background-color: red">50%</div> 
    </div> 
    </div> 
    <div class="col-sm-3 " style="background-color: grey"> 
    <div class="row"> 
     <div class="col-xs-12 " style="background-color: green">25%</div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 " style="background-color: orange">75%</div> 
    </div> 
    </div> 
    <div class="col-sm-3 " style="background-color: blue"> 
    100% 
    </div> 
</div> 

Answer 1

S'il vous plaît essayer propriété "display: flex;" au parent.

Answer 2

@Satheesh Kumar merci de m'indiquer dans la bonne direction. Flex était définitivement ce que je voulais. Voici un lien vers ce que j'essayais d'accomplir.

https://codepen.io/anon/pen/XeXXpQ

<div class="equal-height-container"> 
    <div class="first"> 
     <img src="http://placehold.it/250x450"> 
    </div> 

    <div class="second"> 
     <div class="second-a">A</div> 
     <div class="second-b">B</div> 
     <div class="second-c">C</div> 
    </div> 
    <div class="third"> 

    </div> 
    </div> 



    .equal-height-container { 
      max-width: 900px; 
      margin: 0 auto; 
      display: flex; 
     } 
    .first { 
     background-color: #FFF; 
     padding: 20px; 
     flex: 1; 
    } 

    .second { 
     background-color: yellow; 
     flex: 2; 
     display: flex; 
     flex-direction: column; 
    } 

    .third { 
     background-color: yellow; 
     padding: 20px; 
     flex: 2; 
    } 
    .second-a { 
     background-color: #c0dbe2; 
     flex: 2.5; 
    } 

    .second-b { 
     background-color: #cdf1c3; 
     flex: 1; 
    } 

    .second-c { 
     background-color: red; 
     flex: 1; 
    }