具有堆叠图像的引导列：需要具有相同的列高

Posted 2023-03-05

【中文标题】具有堆叠图像的引导列：需要具有相同的列高

【英文标题】：Bootstrap columns with stacked images: need to have same column height

【发布时间】：2016-04-28 08:02:11

【问题描述】：

我有一个带有堆叠图像的 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

【问题讨论】：

您是否尝试添加a display: flex; ？

所以您希望它们始终与第一列具有相同的高度，即使第一列比其他列更小或更大？

xpy：正确。尽管在这种情况下，第一列总是更大/更高。

感谢您的回复，帕特里克。我已经尝试过了，当我缩小到更小的视口时，列的高度不会保持不变。

由于列宽不同并且图像宽度不完全适合它们，这可能非常困难。如果您使图像宽度可被 12 整除且高度完全对应，它可能会起作用。

【参考方案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 使用 .row 类使你的 thml 响应，你可以用 12 列填充它，这就是为什么你有 col-sm-(Number) 在你的情况下 5+4+3=12如果您愿意，可以在此链接中阅读更多内容grid systemn

【参考方案2】：

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

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