データのインポート - > Boostrap自動列

Question

JSONデータをインポートして、各JSONオブジェクトをページに投稿して、それ自身のdivになるようにします。 JSONオブジェクトは4列あります。これはアイテム＃24（アイテムはi = 0で始まる）までは問題ありません。次に、ページは次のようになります。 link to what my page looks like

これも＃30の場合で、36、42 & 48項目は、ここ50

で停止私のコードです：

function displayProducts (productArray) { 
var allProducts = document.getElementById('firstPage'); 
while (allProducts.hasChildNodes()) { 
    allProducts.removeChild(allProducts.firstChild); 
}; 
allProducts.setAttribute('class', 'row'); 
for (var i = 0; i < 50; i++) { 
    var newCol = document.createElement('div'); 
    newCol.setAttribute("name", "newCol"); 
    newCol.setAttribute('class', 'col-md-3'); 

    var productImg = document.createElement('img'); 
    var albumTitle = document.createElement('figcaption'); 
    var songNumber = document.createElement('p'); 

    productImg.setAttribute('src', productArray[i].thumbnailUrl); 
    albumTitle.innerText = "Album Title: " + productArray[i].title; 
    songNumber.innerText = "Track Number: " + productArray[i].id; 

    newCol.appendChild(productImg); 
    newCol.appendChild(albumTitle); 
    newCol.appendChild(songNumber); 
    allProducts.appendChild(newCol); 

}; };

オブジェクト間に隙間がないようにコードを書くにはどうすればよいですか？ ありがとうございます。

Answer 1

I ...私はphp loop counter bootstrap row からロジックを使用して、新しいDIVクラスを追加=行とき、私％4 = 0

答えを考え出し