ブートストラップグリッド.col背の高い - 同じ高さ

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; 
}