带有堆叠图像的Bootstrap列：需要具有相同的列高

Question

I have a Bootstrap section with stacked images and the issue is that I want the second and third columns to always have the same height as the first column. I can't seem to find a solution for the second and third column because they keep fluctuating in height as I change to different view sizes. It would be ideal to have them always align to the bottom and top.

 .gallery { min-height: 980px; } .gallery .row{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; 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> 

Here is the Bootply: http://www.bootply.com/mb2Ez6G7r8

Answer 1

Hi Paul you can resolve in that way, i see that you use boostrap you dont need the property flex in your 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>

and your css

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

dont forget add bootrap in your html

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

i explain why you dont need flex, Boostrap make your thml responsive with class .row and you can fill this with 12 columns that is why you have col-sm-(Number) in your case 5+4+3=12 if you want you can read more in this link grid systemn

Answer 2

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

If height is an issue you should probably use background-image with css instead of <img> element. Hope this will solve the issue.