用给定的数组创建bootstrap 4卡的循环？

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

<div class="container">
  <div class="row" id="card-row">
    <!-- 这里的卡片将会通过JavaScript生成 -->
  </div>
</div>

const data = ['卡片1', '卡片2', '卡片3', '卡片4']; // 给定的数组数据

const cardRow = document.getElementById('card-row');

data.forEach(item => {
  const cardHtml = `
    <div class="col-sm-6 col-md-4 col-lg-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">${item}</h5>
          <p class="card-text">这是一个卡片的内容。</p>
        </div>
      </div>
    </div>
  `;
  
  cardRow.innerHTML += cardHtml;
});