Bootstrap-Gitter nicht richtig ausgerichtet, wenn div dynamisch erstellt

Question

Ich versuche Produktinformationen wie Name, Bildpfad usw. aus der Datenbank mit Repeater abrufen und in der Datenansicht mit Code hinter anzeigen. Ich konnte das Detail erfolgreich abrufen und anzeigen, aber die Ausrichtung des Div ist nicht korrekt.

aspx Code:

<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> 

Code hinter:

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(); 

Stromausgang: screenshot Erwartete Ausgabe: Das vierte Bild unter dem ersten Bild kommen sollte nach gridview Konzept Bootstrap das ist bei mir passiert das nicht und dadurch ändert sich das gesamte Layout.

Ich bin ein Anfänger und habe gerade angefangen Bootstrap zu lernen.

Answer 1

Es gibt zwei Möglichkeiten, dieses Problem zu lösen: 1) Beenden Sie die Zeile nach 3 Spalten und starten Sie die zweite Zeile für die nächsten 3 Spalten. 2) Gleiche Höhe für Spalten hinzufügen. Sie können das folgende Skript verwenden und jeder Spalte eine 'resize-height' Klasse hinzufügen.

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'); 
});