如何使用bootstrap在Api call上创建3 X 3(列X行)的图库

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <!-- 图片卡片 -->
  </div>
</div>

<script>
  // 假设API返回的数据为一个包含图片URL的数组
  var apiData = [
    "https://example.com/image1.jpg",
    "https://example.com/image2.jpg",
    // ...
  ];

  // 遍历数据数组，生成图片卡片
  apiData.forEach(function(imageUrl) {
    var cardHtml = `
      <div class="col-md-4">
        <div class="card">
          <img src="${imageUrl}" class="card-img-top" alt="Image">
          <div class="card-body">
            <h5 class="card-title">Image Title</h5>
            <p class="card-text">Image Description</p>
          </div>
        </div>
      </div>
    `;
    // 将生成的图片卡片添加到容器中
    document.querySelector(".row").innerHTML += cardHtml;
  });
</script>