Как я могу назначить элементы в одной и той же высоте?

Question

У меня проблема с начальной загрузкой. напечатать несколько элементов с угловым (нг повтором) и контейнеры отрегулировать их высоту, высоту изображений ..

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. Топ три является:

matchHeight.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; 
}