基于CTA的栅格引导响应图像

Question

使用Bootstrap 5.我有以下内容：

<div class="row flex-row flex-nowrap overflow-auto g-0 align-items-center my-cards">
    <div class="col-5 col-md-2 me-3" data-card-id="25">
      <img class="img-fluid rounded" src="56ba4956ac082d3c3b038a2542c8e756.png">
    </div>
    <div class="col-5 col-md-2 me-3" data-card-id="35">
      <img class="img-fluid rounded" src="9ca7688e7dd342bcd3669b4281107df3.png">
    </div>
    <div class="col-5 col-md-2 me-3" data-card-id="24">
      <img class="img-fluid rounded" src="ff2ca738f2463d1a8db77224fd27a1b6.png">
    </div>
    <div class="col-5 col-md-2 me-3" data-card-id="2">
      <img class="img-fluid rounded" src="5fa69e886f502187e8a66aeeb3be6573.png">
    </div>
    <div class="col-5 col-md-2 me-3" data-card-id="13">
      <img class="img-fluid rounded" src="74409b63ea174d76157c97198afadd55.png">
    </div>
  <div class="col-5 col-md-2 rounded text-center" style="border: 4px dashed #ddd">
    <button type="button" class="btn btn-link text-decoration-none text-muted" data-bs-toggle="modal" data-bs-target="#manage_cards">
      <i class="fas fa-fw fa-plus-circle"></i> Add card
    </button>
  </div>
</div>

注意图像大小是流动的。图像都有原始尺寸360x225px。

问题图像大小是不同的，因为它响应于img-fluid类，所以我将其设置为在带有col-5的移动设备上看起来更大，而在桌面上使用col-md-2则更小。有一个按钮叫做"Add Card"，我希望它在高度和宽度上和图像大小相同，不管有没有图像，这意味着可能有时间没有图像，而它只是"Add Card“。

当然，现在“添加卡”按钮很小，在填充、高度和宽度方面没有卡片那么大。如何使“添加卡”与其他图像一样响应，相同大小？

Answer 1

您给原始div一个类align-items-stretch而不是align-items-center，所有的flex框都有相同的高度。然后在框中添加卡片文本，将类d-flex justify-content-center添加到add卡div中。

Answer 2

您可以像这样使用getComputedStyle来解决这个问题：

//get image height
let imgHeight = window.getComputedStyle(document.querySelectorAll('.col-5.col-md-2.me-3')[0]).getPropertyValue('height');
//set this height to to button
document.querySelectorAll('.col-5.col-md-2 > button')[0].setAttribute('height', imgHeight);