生成动态卡片来自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;

（它是可调整的伪代码，让你有个主意）