html - 如何使 Bootstrap 4 Image Overlay 卡完全可点击？

Question

我正在使用 Bootstrap 4 卡片元素创建一个图像网格，每个标题都覆盖了标题，但似乎只能链接文本，而不是图像本身。

我尝试过使用拉伸链接方法，但它似乎不起作用。我也尝试将整张卡放在一个锚标签中，但这似乎也不起作用 - 我哪里出错了？

<div class="row">
  <div class="card text-white col-md-4 p-3 border-0">
    <img alt="Card image" class="card-img" src="..." />
      <div class="card-img-overlay">
        <a href="..." class="stretched-link">
          <h2 class="card-title">Title here</h2>
        </a>
      </div>
  </div>
</div>

正如我在 Bootstrap 网站上看到的那样，我原以为链接会延伸到整张卡片，但事实并非如此 - 任何帮助将不胜感激！

标签： htmlcssbootstrap-4

Answer 1

card当你把里面的列似乎工作正常......

<div class="row">
    <div class="text-white col-md-4 p-3 border-0">
        <div class="card">
            <img alt="Card image" class="card-img" src="..." />
            <div class="card-img-overlay">
                <a href="#" class="stretched-link" id="cardlink">
                    <h2 class="card-title">Title here</h2>
                </a>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/p/8r7GoatHj1