如何在 Bootstrap v4 中使链接与 card-img-overlay 一起工作

Question

我遇到一个问题，任何 Bootstrap v4 卡片使用 card-img-overlay 在图像上显示文本会阻止该图像下方的链接工作。

这些链接有效：

<div class="card" style="border-color: #333;">
    <img class="card-img-top" src="..." alt="Title image"/>
    <div class="card-inverse">
      <h1 class="text-stroke">Title</h1>
    </div>
    <div class="card-block">
      <a href="#" class="card-link">Card link</a>
      <p class="card-text">Article Text</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Date - Author</small>
    </div>
  </div>

这些链接不起作用：

<div class="card" style="border-color: #333;">
    <img class="card-img-top" src="..." alt="Title image"/>
    <div class="card-img-overlay card-inverse">
      <h1 class="text-stroke">Title</h1>
    </div>
    <div class="card-block">
      <a href="#" class="card-link">Card link</a>
      <p class="card-text">Article Text</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Date - Author</small>
    </div>
  </div>

我看到 bootstrap v4 有一个未解决的问题，但是任何人都可以提供一个可以保持相同外观的解决方法吗？

Answer 1

如 Michael Coker 所述，将以下内容添加到您的 css 可解决此问题。

.card-link {
  position: relative;
}

Answer 2

叠加层是 position: absolute，它为该元素提供了 z-index，而卡片中的其余内容是静态 positioned，所以它的 none有一个z-index。您可以通过添加非静态 position 给 link 一个 z-index，并且由于您的卡片 link 在 HTML 中的叠加层之后出现，堆叠order 会将卡片 link 的堆叠顺序放在叠加层的顶部。

.card-link {
  position: relative;
}

如何在 Bootstrap v4 中使链接与 card-img-overlay 一起工作

How to make links work with card-img-overlay in Bootstrap v4

html

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4