从 Javascript 数组和 Bootstrap 在不同的行和列中生成动态卡片 HTML 卡片答案

【问题标题】：Generating Dynamic Cards HTML cards from a Javascript array and Bootstrap in different rows and Columns从 Javascript 数组和 Bootstrap 在不同的行和列中生成动态卡片 HTML 卡片
【发布时间】：2019-10-18 05:06:05
【问题描述】：

我想创建我的团队部分，其中包含多于一排且一排有 5 张卡片。我想创建所有团队成员的数组并以上述格式对齐。但是我的问题是当一行被 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>

我希望每行只对齐五张卡片。

【问题讨论】：

只需使用模数将“一个”数组分块成位或查看stackoverflow.com/questions/7273668/…，然后为每个块添加一行
就没有办法只用一个循环和一个数组吗？
是的，在当前迭代中使用modulo 运算符，每次为 5 时，您关闭并开始新行

标签： javascript html css arrays bootstrap-4

【解决方案1】：

当您使用引导网格类row 和col 时，当您使用col-md-2 创建列时，单行将获得6 个分区，因此在添加更多后，您可能会在一行中获得6 个卡数组中的团队成员超过 5 人。

由于没有将行划分为 5 个分区的类，但在您的情况下，您可以添加一点边距以使其每行五张卡片。我用m-2 尝试了它，它的边距为2px。

将其添加到您在循环内创建列的位置

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

希望它对你有用。

【讨论】：

【解决方案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;

（它是可调整的伪代码，让您有一个想法）

【讨论】：