bootstrap：缩略图的高度相等（最好使用 flex）

Question

我正在使用引导程序，我希望我的盒子找出最高的行并为所有盒子选择那个高度。现在我想我应该可以用 flex 来做到这一点，但我还没有让它工作！

HTML：

<div class="my-projects">
    <div class="col-sm-4 col-md-3">
        <div class="thumbnail">
            <div class="caption">
                <h3>

                </h3>
                <p>

                </p>
                <p>

                </p>
            </div>
        </div>
    </div>
</div>       

CSS

.content {
    display: flex
}
.content .thumbnail{
    flex:1;
}

这似乎使这些行变得又长又细，而且大面积破碎......

Answer 1

尝试将其添加到您的 CSS 中

    .thumbnail img:hover {transform: scale(1.1);}
.thumbnail img {transition: all 0.3s ease 0s; width: 100%}

您可以设置缩略图大小，并且图像应缩放以适应。