引导卡因文本长度而无法响应

Question

我正在使用 BOOTSTRAP 5，目前在卡片方面遇到问题。我通过 JS 打印它们，但尝试在 HTML 上处理它，所以这不是问题。我不知道如何制作完全相同的卡片，img 位于 xl bootstrap 断点的左侧，img 位于所有其他断点的顶部。问题是右侧（xl）和底部（其余）的文本。 文字各不相同，所以我的整张卡片都搞砸了。一个较大，一个较小等等

<div class="row mt-5 mb-5">
                        <div class="col-12">
                            <h4 class="text-white mb-4">Buonasera</h4>
                            <div id="printHorizontalCards" class="row text-white">

                            </div>
                        </div>
                    </div>

let card = document.createElement("div");
    card.classList.add("col-12", "col-sm-6", "col-lg-3", "col-xl-4", "mt-3");
    card.innerHTML = `
              <a href="#" class="text-decoration-none">
                  <div class="card mb-3 grey-horizontal-card position-relative h-100 d-xl-flex justify-content-center">
                      <div class="row ">
                          <div class="col-lg-12 col-xl d-flex align-items-center">
                              <img src="${albums[i].albumCover}" class="img-fluid rounded-start"
                                  alt="immagine album" />
                          </div>
                          <div class="col d-flex align-items-center">
                              <div class="card-body">
                                  <h5 id="titoloHorizontalCard"
                                      class="card-title d-flex justify-content-center text-white">
                                      ${albums[i].albumTitle}
                                  </h5>
                              </div>
                          </div>
                      </div>
                      <div class="play-badge">
                          <img class="playButton" src="/assets/imgs/svg/play-fill.svg"
                              alt="play button" />
                      </div>
                  </div>
              </a>
              `;
    document.getElementById("printHorizontalCards").appendChild(card);

卡片上的相对位置，因为我需要在图片顶部添加徽章。它在较小的尺寸上工作得很好，每张卡片都在彼此的顶部，图像在顶部，文本在底部。在 1100 像素左右开始断裂，我不明白为什么。文本长度从 1 个单词到 8-12 个单词不等（如有中断）

我尝试使用固定宽度/高度，删除 h-100 和许多其他东西。我花了大约 3 个小时试图解决这个问题，因为这是我项目的最后一件事，但就是无法让事情正常进行。试图修复文本的位置，但它破坏得更多。文本截断让文本越过卡片..Idrk 这应该是最终结果 我的项目一切都坏了

Answer 1

编辑，您可以编写类似的内容，以使字体大小响应。

@media (min-width: 576px) { 
  .card-text{
    font-size:1rem;
  }
}

@media (max-width: 575.98px) {
 .card-text{
    font-size:.0.5rem;
  } 
}

@media (min-width: 768px) { 
  .card-text{
    font-size: 0.8rem;
  }
}

@media (min-width: 992px) { 
  .card-text{
    font-size: 1rem;
  }
}

@media (min-width: 1200px) { 
  .card-text{
    font-size: 1.1rem;
  }
}