javascript - htmlOutput 中的图像网格

Question

const spaceForResults = document.getElementById("spaceForResults");
spaceForResults.innerHTML = "";
let htmlOutput = "";
let searchedTerms = "";

for (let i = 0; i < terms.length; i++) {
  let Creator = terms[i].Creator;
  let Provider = terms[i].Provider;
  let Image = terms[i].ShownBy;
  let Time = terms[i].Date;
  let Image = terms[i].Image;
  let Period = terms[i].Period;
  searchedTerms +=
    "<div class='card col-sm-4 text-center mt-2'>" +
    "<img src='" + Image + "' class='card-img-top image-size mt-3'>" + "<div class='card-body'>" +
    "<h5 class='card-title'><span class='bold'>" + Title + "</span></h5>" +
    "<p class='card-text'>" + Creator + "</p>" +
    "<p class='card-text'><span class='font-italic'>" + Date + "</span></p>" +
    "<p class='card-text'><span class='font-italic'>" + Period + "</span></p>" +
    "<p class='card-text'><span class='font-italic'>" + Provider + "</span></p>" +
    "</div>" + "</div>"
  spaceForResults.innerHTML += searchedTerms;
}

}

<div class="container">
  <div class="row">
    <div id="spaceForResults" class='col-7'>
    </div>
  </div>
</div>

我正在从 MongoDB 文档中获取内容 + 图像，我想在 Javascript 的 htmlOutput 中显示为网格（3 列）中的引导卡。

现在图像是垂直显示的。我知道如何在“正常”css 中执行此操作，但有人知道如何在 htmlOutput 中执行此操作或我如何解决此问题？

非常感谢，伊娃

标签： javascriptcssgridbootstrap-cards