如何为一行中的元素分配相同的高度？

Question

我遇到了一点引导问题。 我打印了一些有角度的元素（ng 重复），容器调整它们的高度以适应图像的高度..

View of my recipes

代码：

<div class="row text-center">
    <div class="col-lg-3 col-md-12 col-sm-12" ng-repeat="recipe in purchasedRecipes">
        <a href="{{recipe.PdfUrl}}" target="blank">
            <div class="thumbnail">
                <img src="{{recipe.ImgUrl}}" alt=""/>
                <div class="caption">
                    <h3>{{recipe.RecipeName}}</h3>
                </div>
            </div>
        </a>
    </div>
</div>

宽度很容易用 bootstrap 分配 (class="col-lg-3 col-md-12 col-sm-12") 我怎样才能分配一个固定的响应高度，以便我的食谱是相同大小的行？

感谢您的帮助:)

Answer 1

见here。前三名是：

ma​​tchHeight.js

• matchHeight.js Docs
• matchHeight.js GitHub

使用表格

他们给出的例子：

@media only screen and (min-width : 768px) {
    .is-table-row {
        display: table;
    }
    .is-table-row [class*="col-"] {
        float: none;
        display: table-cell;
        vertical-align: top;
    }
}

巨大的负边距和正边距

他们的代码：

.row.match-my-cols {
    overflow: hidden; 
}

.row.match-my-cols [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}