我正在使用 Bootstrap 来展示我的元素。
我试图在每行中放置 3 张图片。然而,问题是所有图像的尺寸都略有不同。
这导致我的图像跳过了一些(因此某些行将只有 1 张图像)。
举个例子
我想要的是二维网格,每行正好有 3 张图像,没有跳过任何点。我不想拉伸(stretch)任何图像,所以它只是空白区域,使所有图像具有相同的高/宽比。
我还想确保即使在屏幕较小时也能正常工作(我不想让图像高度绝对化)
我用过的 CSS:
<div class="row">
<div class="col-sm-4 portfolio-item">
<a href="#bubble-fighter" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/bubble-fighter.jpg" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#doomsday-shopping" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/doomsday-shopping.jpg" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#magic101" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/magic101_3.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#travel-smart" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/travel-smart.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#union-of-swords" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/union-of-swords.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#bear-boat-adventure" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/bear-boat-adventure9.jpg" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#translink-me" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/translink-me.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#transit-alarm" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/transit-alarm.png" class="img-responsive" alt="">
</a>
</div>
</div>
最佳答案
在 (1, 4, 7 & 10 ...) 上添加清除
#portfolio .portfolio-item:nth-child(3n+1) {
clear: both;
}
关于html - 由于图像大小不同,Bootstrap 网格未对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28910046/