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

Question

我有一个带有堆叠图像的Bootstrap部分,问题是我希望第二列和第三列始终与第一列具有相同的高度.我似乎找不到第二和第三列的解决方案,因为当我改变到不同的视图大小时,它们保持高度波动.让它们始终与底部和顶部对齐是理想的.

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

这是Bootply:http://www.bootply.com/mb2Ez6G7r8

Answer 1

嗨，Paul，你可以用这种方式解决，我看到你使用 boostrap，你不需要 css 中的属性 flex 。

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

不要忘记在你的 html 中添加 bootrap

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

我解释为什么你不需要flex，Boostrap让你的thml响应类.row，你可以用12列填充它，这就是为什么你有col-sm-(Number)在你的情况下5+4+3=12如果你愿意您可以在此链接网格系统中阅读更多内容