时间戳

首页 > 解决方案 > 网格中带有 CTA 的引导响应图像

html - 网格中带有 CTA 的引导响应图像

问题描述

使用 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。

问题 图像大小不同，因为它对 class 有响应img-fluid，所以我将它设置为在移动设备上看起来更大，在桌面上看起来更col-5小。col-md-2有一个名为“添加卡片”的按钮，我希望它在高度和宽度方面与图像大小相同，无论是否存在图像，这意味着可能有时间没有图像，它只是“添加卡”。

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

标签： htmlcsstwitter-bootstrap

解决方案

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

推荐阅读