divを動的に作成するときにブートストラップグリッドが正しく配置されない

Question

名前、画像パスなどの製品情報をデータベースからリピータを使用して取得し、コードビューを使用してデータビューに表示しようとしています。私は正常に詳細を取得して表示することができましたが、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 期待出力： 第4の画像を第一画像の下に来る必要があるGridViewの概念をブートストラップするために応じて私の場合は起こらず、レイアウト全体が変化するからです。

私は初心者で、ちょうどブートストラップを学び始めました。

Answer 1

この問題を解決する方法は2通りあります。 1）3列後に行を終了し、次の3列に対して2行目を開始します。 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'); 
});