html - 带有堆叠图像的 bootstrap 列: need to have same column height

我有一个带有堆叠图像的Bootstrap部分，问题是我希望第二列和第三列始终具有与第一列相同的高度。我似乎找不到第二列和第三列的解决方案，因为当我更改为不同的 View 尺寸时，它们的高度一直在波动。使它们始终与底部和顶部对齐将是理想的。

.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

最佳答案

嗨，保罗，您可以通过这种方式解决问题，我看到您使用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您可以在此链接中阅读更多信息grid systemn