使用 JQuery 时引导卡无法正确显示答案

【问题标题】：Bootstrap Cards does not show correctly when using J Query使用 JQuery 时引导卡无法正确显示
【发布时间】：2021-10-06 03:40:00
【问题描述】：

我试图创建一个动态 HTML 页面，其中数据将来自对 AJAX 请求的 JSON 响应。我试图将三列放在一行中，但我得到一列一列。

我想知道我的代码有什么问题。我很感激有人能给我一些指点。

window.onload = function loadDoc() {
  var url = "SK_movie_world_movies.json";
  
  $.getJSON(url, function(data) {
    $.each(data, function(i, item) {
      //alert(item.Title);
      let name = item.Title;
      let ca_st = item.cast;
      let dir = item.director;
      let gen = item.genre;
      let dur = item.duration;
      let lang = item.language;
      let syn = item.synopsis;
      let pic = item.image;
      let id = item.MoveID;

      $(".movie_container").append(
        `<div class="col-md-4 mb-5">
          <div class="card">
            <div class="text-center"><img src="${pic}" alt="${id}" class="card-img-top"></div>
            <div class="card-body">
              <h5 class="card-title text-center">${name}</h5>
              <p class="card-text">Cast: ${ca_st}</p>
              <p class="card-text">Director: ${dir}</p>
              <p class="card-text">Genre: ${gen}</p>
              <p class="card-text">Duration: ${dur}</p>
              <p class="card-text">Language: ${lang}</p>
              <div class="text-center">
                <a href="#" class="btn btn-primary">View Detail</a>
              </div>
            </div>
          </div>
        </div>`);
    });
  })
}

【问题讨论】：

你试过把它们放在
具有 .movie_container 类的父元素也应该具有行类
其实我做到了。

但它显示为每行一列而不是3 列。
@tigerhoo 不要使用movie_container div 而是您可以尝试在<div class="row" style="margin-top: 20px" > 中使用id 将其更改为<div class="row" style="margin-top: 20px" id="movie_container" > 和$(".movie_container") 这一行应该是$("#movie_container")
@RamazanAlkan 非常感谢您的指点。确实有效。你是我的救星。 :D

标签： javascript html jquery json bootstrap-4

【解决方案1】：

您应该在行之后使用子元素，而不是使用另一个容器。

不要将 movie_container 用作另一个容器，只需将 ID 附加到您的 <div class="row" style="margin-top: 20px" id="movie_container" > 并尝试将您的电影附加到其中。

$("#movie_container").append(
        `<div class="col-md-4 mb-5">
          <div class="card">
            <div class="text-center"><img src="${pic}" alt="${id}" class="card-img-top"></div>
            <div class="card-body">
              <h5 class="card-title text-center">${name}</h5>
              <p class="card-text">Cast: ${ca_st}</p>
              <p class="card-text">Director: ${dir}</p>
              <p class="card-text">Genre: ${gen}</p>
              <p class="card-text">Duration: ${dur}</p>
              <p class="card-text">Language: ${lang}</p>
              <div class="text-center">
                <a href="#" class="btn btn-primary">View Detail</a>
              </div>
            </div>
          </div>
        </div>`);

【讨论】：