2017-06-09 26 views
-1

ブートストラップ・コンテナを使用して3つのパネルの行を作成しようとしています。しかし、私の現在のコードでは、1つのパネルはコンテナ内で終わり、2つは外側に残っています。ブートストラップ・コンテナが早く終了する

どこが間違っているのか分かりません。私はここで問題

//var count = 0; above 
//for loop for n > 3 above 
html = ""; 
      if (count%3===0) { 
       html = html + "<div class=\"container\">" + 
           "<div class=\"row\">"; 
      } 
       html = html + "<div class=\"col-sm-4\">" + 
           "<div class=\"panel panel-primary\">" + 
           "<div class=\"panel-heading\">" + name + "</div>" + 
           "<div class=\"panel-body\"><img src=\"" + imageURL + "\"class=\"img-responsive\" style=\"width:100%\" alt=\"Image\"> </div>" + 
           "<div class=\"panel-footer\"> <h2>$" + 
           price.toString() + recString + "</h2>" + description + "</div> </div> </div>"; 
        if (count%3===2) { 
        html = html + "</div> </div> <br> <br>" 
       } 
        count = count + 1; 
        $('#items').append(html); 

であるとは考えていないので、私がカウントされ、私の<div></div>何度も振り返ってきた

は私のhtmlファイル内の項目のdiv要素です。ループの各反復で$items div要素に付加することにより、

<div id="items" > 

</div><br> 
+0

これで何を達成しようとしていますか?なぜあなたはパネルを使用していますか?なぜこのループでHTMLを作成していますか? –

+0

ダイナミックパネルを作成し、JSを使用してデータセットを反復処理することができます。データ内の各行に新しいパネルを作成する –

答えて

0

、Webブラウザをチェックし、アイテムがdivの追記後に閉鎖されていることを見ています。親が閉じられると、Webブラウザはコンテナと行divを含むすべての子を閉じます。

解決策はループの外側の端に追加されました

関連する問題