Бутстрап сетки не выравнивается должным образом при динамическом создании div

Question

Я пытаюсь получить информацию о продукте, такую ​​как имя, путь к изображению и т. Д. Из базы данных, используя ретранслятор и отображение в dataview с использованием кода позади. Я мог бы успешно извлекать и отображать детали, но выравнивание div не является правильным.

код ASPX:

<div class="row"> 
       <asp:Repeater ID="Repeater2" runat="server"></asp:Repeater> 
       <asp:Repeater ID="Repeater1" runat="server"> 
        <ItemTemplate> 
         <div class="col-sm-4 col-lg-4 col-md-4"> 
          <div class="thumbnail"> 
           <img width="250px" height="300px" src="images/<%#Eval("ImagePath") %>" alt="<%#Eval("ProductName") %>"> 
           <div class="caption"> 
            <h4><%#Eval("ProductName") %></h4> 
            <h4><%#Eval("UnitPrice")%></h4> 
           </div> 
           <div class="clearfix"> 
           </div> 
          </div>         
         </div> 
        </ItemTemplate> 
       </asp:Repeater> 
      </div> 

код позади:

SqlDataAdapter sda = new SqlDataAdapter("SELECT ProductName, UnitPrice, ImagePath FROM Products", con); 
     DataTable dt = new DataTable(); 
     sda.Fill(dt); 

     DataView dv = new DataView(dt); 
     dv.Sort = "ProductName"; // Sort by product name 
     Repeater1.DataSource = dv; 
     Repeater1.DataBind(); 

выходной ток: screenshot Ожидаемые результаты: Четвертое изображение должно прийти ниже первого изображения в соответствии с начальной загрузки GridView понятие, которое является не происходит в моем случае и из-за чего меняется весь макет.

Я новичок и только что начал изучать бутстрап.

Answer 1

Существует два способа решить эту проблему: 1) Завершить строку после трех столбцов и начать вторую строку для следующих 3 столбцов. 2) Добавьте равную высоту для столбцов. Вы можете использовать следующий скрипт и добавить класс «resize-height» в каждый столбец.

function setHeight(column) { 

     var maxHeight = 0; 
     //Get all the element with class = col 
     column = jQuery(column); 
     column.css('height', 'auto'); 
     //Loop all the column 
     column.each(function() { 
      //Store the highest value 
      if (jQuery(this).height() > maxHeight) { 
       maxHeight = jQuery(this).height(); 
      } 
     }); 
     //Set the height 
     column.height(maxHeight); 

} 

jQuery(window).on('load resize', function() { 
    setHeight('.resize-height'); 
});