Question

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

这些链接确实有效：

<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

叠加层为position: absolute，该元素为z-index，卡片中的其余内容为静态position，因此没有z-index z-index }。您可以通过添加非静态position为链接指定.card-link { position: relative; }，并且由于您的卡片链接位于HTML中的叠加层之后，堆叠顺序会将卡片链接的堆叠顺序放在覆盖。

 $http({

       method: 'POST',
       url: serviceURL
       headers: {
           'Content-Type': undefined
       },
       transformRequest: angular.identity,
       data: formData
   });

Answer 2

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

.card-link {
  position: relative;
}

如何使链接与Bootstrap v4中的card-img-overlay一起使用

2 个答案: