Saya ingin membuat bagian Tim saya dengan lebih dari satu baris dan 5 kartu dalam satu baris. Saya ingin membuat susunan semua anggota tim dan menyelaraskannya dalam format yang disebutkan di atas. Tapi masalah saya adalah saya tidak bisa membuat kartu sejajar di baris yang berbeda ketika satu baris diisi oleh 5 kartu.

Saya melakukannya dengan membuat 3 array berbeda secara manual untuk 3 baris. Tapi saya ingin melakukannya menggunakan Single Array dan Single Loop.

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;
});

Ini Kode HTML saya:

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

Saya berharap untuk menyelaraskan hanya lima kartu di setiap baris.

1
Bimal Timilsina 2 Juni 2019, 12:36

2 jawaban

Jawaban Terbaik

Ada ribuan cara untuk melakukannya, saya hanya ingin contoh satu menggunakan operator modulo. Anda bisa melakukannya dalam satu lingkaran seperti ini:

// 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;

(Ini pseudocode tweakable untuk membiarkan Anda mendapatkan ide)

1
john Smith 2 Juni 2019, 10:24

Saat Anda menggunakan kelas bootstrap grid row dan col, Saat Anda membuat kolom menggunakan col-md-2, baris tunggal akan mendapatkan 6 partisi, jadi Anda mungkin mendapatkan 6 kartu dalam satu baris setelah menambahkan lebih dari 5 anggota tim dalam larik.

Karena tidak ada kelas untuk membagi baris dalam 5 partisi, tetapi dalam kasus Anda, Anda dapat menambahkan sedikit margin untuk menjadikannya lima kartu per baris. Saya mencobanya dengan m-2 yang merupakan margin 2px.

Tambahkan di mana Anda membuat kolom di dalam loop

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

Semoga berhasil untuk Anda.

0
YouBee 2 Juni 2019, 10:47