生成動態卡片來自Javascript數組的HTML卡和不同行和列中的Bootstrap

Question

我想在一行中創建包含多行和5張卡的Team部分。 我想創建所有團隊成員的數組，並以上述格式對齊。 但我的問題是當一行被5張卡填充時，我無法將卡對齊在不同的行中。

我這樣做是手動創建3行不同的3個數組。 但我想用單陣列和單循環來做。

const teamDataOne = [
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
    facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
    facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  }
];

const container = document.getElementById("teamRowOne");

teamDataOne.forEach(result => {
  // Construct card content
  const content = `
    <div class="col-md-2 shadow p-3 mb-5 bg-white rounded ">
        <img src="${result.img}" height="150" width="150" alt="name">
        <h4>${result.name}</h4>
        <h6>${result.position}</h6>
        <div class="border-bottom"></div>
        <a href="${
          result.facebook
        }" target="_blank" class="btn-social btn-facebook"><i class="fa fa-facebook"></i></a>
        <a href="${
          result.email
        }" target="_blank" class="btn-social btn-email"><i class="fa fa-envelope"></i></a>
        </div>
    `;

  // Append newyly created card element to the container
  container.innerHTML += content;
});

這是我的HTML代碼：

<div class="row justify-content-around wow zoomIn" id="teamRowOne">
      </div>

我希望每行只對齊五張牌。

Answer 1

當您使用bootstrap網格類row和col ，使用col-md-2創建列時，單行將獲得6個分區，因此在添加5個以上團隊成員后，您可能會在一行中獲得6個卡數組。

由於沒有類可以划分5個分區中的行，但在您的情況下，您可以添加一點余量以使其每行有5個卡。 我用m-2嘗試了它，這是2px的余量。

將它添加到循環內創建列的位置

<div class="col-md-2 m-2 shadow p-3 mb-5 bg-white rounded ">

希望對你有效。

Answer 2

有數千種方法可以做到，我只想舉例說明使用模運算符。 你可以在一個循環中這樣做：

// dont use row as a container anymore, take the parent element
var container = document.getElementById("row-container");
var content="";    
teamData.forEach(function(result,i){
  if(i == 0){
    //add start row 
    content+= '<div class="row">'
  }
  // add content
  content += '<div class="col....'

  if(i!=0 && i%5 == 0){

    // add end of row ,and start new row on every 5 elements
    content += '</div><div class="row">'
  }

});
// after looping dont forget to close the last row 
content += '</div>'
container.innerHTML += content;

（它是可調整的偽代碼，讓你有個主意）