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

嗨保罗你可以这样解决，我看到你使用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-（数字）在你的情况下5 + 4 + 3 = 12如果您愿意，可以在此链接grid systemn

中阅读更多内容

Answer 2

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

如果高度是一个问题，您应该使用background-image与css而不是<img>元素。希望这能解决问题。

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

2 个答案: