html - 由于图像大小不同，Bootstrap 网格未对齐

Question

我正在使用 Bootstrap 来展示我的元素。

我试图在每行中放置 3 张图片。然而，问题是所有图像的尺寸都略有不同。

这导致我的图像跳过了一些(因此某些行将只有 1 张图像)。

举个例子

http://bosung.info/#portfolio

我想要的是二维网格，每行正好有 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>

Answer 1

在 (1, 4, 7 & 10 ...) 上添加清除

#portfolio .portfolio-item:nth-child(3n+1) {
  clear: both;
}