Cột Bootstrap với hình ảnh xếp chồng lên nhau: cần có cùng chiều cao cột

Question

Tôi có phần Bootstrap với hình ảnh xếp chồng và vấn đề là tôi muốn cột thứ hai và thứ ba luôn có cùng chiều cao với cột đầu tiên. Tôi dường như không thể tìm thấy giải pháp cho cột thứ hai và thứ ba vì chúng tiếp tục dao động chiều cao khi tôi thay đổi thành các kích thước chế độ xem khác nhau. Nó sẽ là lý tưởng để có chúng luôn luôn phù hợp với phía dưới và trên.

.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>

Đây là Bootply: http://www.bootply.com/mb2Ez6G7r8

Answer 1

Hi Paul bạn có thể giải quyết theo cách đó, tôi thấy rằng bạn sử dụng boostrap bạn không cần tài sản flex trong css của bạn.

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

và css của bạn

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

không quên thêm bootrap trong html của bạn

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

tôi giải thích tại sao bạn không cần phải flex, Boostrap làm thml của bạn đáp ứng với lớp .row và bạn có thể điền điều này với 12 cột đó là lý do tại sao bạn có col-sm- (Số) trong trường hợp của bạn 5 + 4 + 3 = 12 nếu bạn muốn bạn có thể đọc thêm trong liên kết này grid systemn

Answer 2

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

Nếu chiều cao là một vấn đề có lẽ bạn nên sử dụng background-image với css thay vì <img> phần tử. Hy vọng điều này sẽ giải quyết được vấn đề.