Bootstrap grid .col taller - такой же рост

Question

Я пробовал много решений, но не могу найти его. У меня есть 3 разных столбца с разными типами текста, и мне нужно, чтобы они имели одинаковую высоту. Но они разные: colums Может ли кто-нибудь помочь?

Код:

.col-sm-2{  
 
    color: #adadad; 
 
    background-color: #dce7ee; 
 
    font-size: 100%; 
 
} 
 

 
.col-sm-7{ 
 
    color: #433f40; 
 
    background-color: #dce7ee; 
 
    font-size: 200%; 
 
    font-weight: bold; 
 
} 
 

 
.subtext { 
 
    font-size: 100%; 
 
    color: #00569f 
 
} 
 

 

 
.col1{ 
 
    color: #00569f; 
 
    text-transform: uppercase; 
 
    background-color: #c4d100; 
 
} 
 
.col2{ 
 
    color: #c4d100; 
 
    text-transform: uppercase; 
 
    background-color: #00569f; 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-sm-2"> 15 m <br>imagem</br> </div> 
 
     <div class="col-sm-7">Fernando de Noronha <br class="subtext">+ de 500 vôos!</br></div> 
 
     <div class="col-sm-3 col1">A PARTIR DE <br>R$1.220</br></div> 
 
    </div> 
 
</div>

Answer 1

Один метод использует display: table как это. Надеюсь, что это сработает.

.row { 
    display: table; 
} 

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