Bootstrap - 使列内的图像具有相同的高度？

如何让列内的图像具有相同的高度？Bootstrap - 使列内的图像具有相同的高度？

我正在尝试制作像这样的网格布局site。

这是我的尝试bootsrap。

但我不能做出高度一致的：

代码：

<div class="container"> 
    <div class="row"> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-6 col-sm-6"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

    </div> 

    <div class="row"> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-6 col-sm-6"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

    </div> 

    <div class="row"> 

     <div class="col-md-6 col-sm-6"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
      </div> 
     </div> 

    </div> 
</div>

有什么事情，我需要做的像侧？如果是这样，我应该遵守什么尺寸的图像？

或者它是我应该在JavaScript端或CSS的东西？

或者我应该使用一个插件？

任何想法？

来源

2017-02-10 laukok

你试过了'.row-eq-height'类的bootstrap吗？ http://getbootstrap.com.vn/examples/equal-height-columns/正在使用flexbox –

@MihaiT使列具有相同的高度。我寻找使图像具有相同的高度。 – laukok

也就是说，当你在较小的屏幕上时，'.row-eq-height'会导致一个bug。它强制3列保持不变，即使你在大屏幕和中屏幕上使用col-md-4，也希望这3列在小屏幕上成为1列。 – laukok

我让你成为你如何实现你想要的例子。

是通过使用background-images而不是图像。所以首先你要将列与高度相等，然后使用与您在.grid-items中放入的图像相同的背景图像。并用opacity:0隐藏第一个img;

你需要保持原有的IMGS使得grid-items有物理高度

让我知道这对你的作品

看到CSS

使用> jsfiddle

代码

.grid-item { 
    display: block; 
    margin: 0 5px; 
    border: 1px solid red; 
    height:100%; 
} 
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { 
    padding-left: 0; 
    padding-right: 0; 
} 


.row { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display:   flex; 
    flex-wrap: wrap; 
    margin:10px 0; 
} 
.row > [class*='col-'] { 
    display: flex; 
    flex-direction: column; 

} 
.row > [class*='col-'] > [class*='col-'] { 
    height:100%; 
} 
a.grid-item img { opacity:0} 
a.grid-item { background-size:cover } 

.col-md-3 .col-md-12 + .col-md-12 { 
    margin-top:10px; 
}

HTML

<div class="container"> 
<div class="row"> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-6 col-sm-6"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

</div> 

<div class="row"> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-6 col-sm-6"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

</div> 

<div class="row"> 

    <div class="col-md-6 col-sm-6"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
     </div> 
    </div> 

</div> 
</div>

来源

2017-02-10 08:41:43

谢谢你的回答。但我不明白为什么你有这个在CSS'a.grid-item {background：url（“http://placehold.it/800x600”）无重复滚动中心顶部/覆盖} .col-md- 3 .col-md-12 + .col-md-12 {margin_top：10px; }' – laukok

那么800x1200和其他800x600的图片在html上会发生什么？正如我解释的那样， – laukok

。原始的imgs必须留在html中，因为如果你删除它们或者在它们上使用'display：none'，'.grid-items'将不会有任何'height'。在他们的帮助下，您可以在行（和列）上设置所需的高度。但是你用“不透明度：0”来隐藏它们，并为每一列添加不同的背景图像。在我的例子中，我只添加了一个img作为背景。但是您需要为每个列添加背景图片。这是我能想到的唯一方法，你可以使所有列的高度相等，imgs填充整个列 –

Bootstrap - 使列内的图像具有相同的高度？

回答

相关问题