スタックされたイメージを持つブートストラップ列：同じ列の高さを持つ必要があります

Question

スタックされたイメージを持つブートストラップセクションがあり、問題は2番目と3番目の列が常に最初の列と同じ高さになるようにすることです。 2番目と3番目の列の解を見つけることができないようです。なぜなら、ビューのサイズを変えていくうちに高さが変動するからです。それらを常に底部と上部に整列させることが理想的です。ここで

.gallery { 
 
\t min-height: 980px; 
 
} 
 
    
 
.gallery .row{ 
 
\t display: -webkit-box; 
 
\t display: -webkit-flex; 
 
\t display: -ms-flexbox; 
 
\t display: flex; 
 
}

<div class="container-fluid gallery"> 
 

 
    <div class="row"> 
 
    <div class="col-sm-5"> 
 
     <a href="#"><img src="http://lorempixel.com/528/980/technics" class="img-responsive"></a> 
 
    </div> 
 
    
 
    <div class="col-sm-4"> 
 
     <a href="#"><img src="http://lorempixel.com/409/490/technics" class="img-responsive"></a> 
 
     <a href="#"><img src="http://lorempixel.com/409/490/technics" class="img-responsive"></a> 
 
    </div> 
 
    
 
    <div class="col-sm-3"> 
 
     <a href="#"><img src="http://lorempixel.com/324/327/technics" class="img-responsive"></a> 
 
     <a href="#"><img src="http://lorempixel.com/324/327/technics" class="img-responsive"></a> 
 
     <a href="#"><img src="http://lorempixel.com/324/327/technics" class="img-responsive"></a> 
 
    </div> 
 
    </div> 
 
    
 
</div>

Bootplyです：http://www.bootply.com/mb2Ez6G7r8

Answer 1

こんにちはポール、あなたがそのように解決することができ、私はあなたがあなたのCSSのプロパティフレックスを必要といけないブートストラップを使用することを参照してください。

<div class="row"> 
<div class="col-sm-5"> 
    <a href="#"><img src="https://www.jssor.com/demos/img/paint/01.jpg"></a> 
</div> 

<div class="col-sm-4"> 
    <a href="#"><img src="https://www.jssor.com/demos/img/paint/02.jpg"></a> 
    <a href="#"><img src="http://lorempixel.com/409/490/technics" class="img-responsive"></a> 
</div> 

<div class="col-sm-3"> 
    <a href="#"><img src="https://www.jssor.com/demos/img/paint/06.jpg" class="img-responsive"></a> 

とあなたのCSS

.gallery { 
min-height: 980px !important;} 

は、私はあなたがフレックス必要いけない理由を説明

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

あなたのhtmlでbootrapを追加し忘れていけない、ブートストラップクラス.rowであなたのthmlが応答します12列で記入することができます。なぜなら、このリンクでもっと読むことができるようにするには、あなたのケースでは5 + 4 + 3 = 12のcol-sm-（Number）を持っているからです。grid systemn

Answer 2

.column-sm-4{ 
    display: flex; 
    flex-direction: row; 
} 

高さは、おそらく代わりに<img>要素のCSSでbackground-imageを使用すべき問題がある場合。 これで問題は解決します。