使用引导卡作为超链接

Question

我有一张用作链接的引导卡。

尝试用 <a> 包装它会改变卡片的所有样式。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <div class="card" style="width: 15rem; display: inline-block">
    <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Normal card</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>

<a href="">
  <div class="card" style="width: 15rem; display: inline-block">
    <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Wrapped with a tag</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>

</a>

我应该如何包装卡片以保持其外观并将其用作链接？

原文由 Poogy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是因为 <a> 标签具有来自用户代理浏览器的默认蓝色。尝试向链接添加一个类并将 color:inherit 设置为该类

 a.custom-card,
a.custom-card:hover {
  color: inherit;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="card" style="width: 15rem; display: inline-block">
  <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Normal card</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<a href="" class="custom-card">
  <div class="card" style="width: 15rem; display: inline-block">
    <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Wrapped with a tag</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</a>

原文由 Bhuwan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您使用的是 Bootstrap 4.3，则不必使用 <a> 标签包装卡片，而是将其放入 card-body 中，然后使用 stretched-link class.这是更清洁的方式。

有关详细信息，请访问 https://getbootstrap.com/docs/4.3/utilities/stretched-link/ 。

如果您不能使用 Bootstrap 4.3，这是 stretched-link 类的样式：

 .stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0,0,0,0);
}

这是示例：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="card" style="width: 15rem; display: inline-block">
  <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Normal card</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<div class="card" style="width: 15rem; display: inline-block">
  <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Alternative</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="stretched-link"></a>
  </div>
</div>

原文由 Mladen Mitrovic 发布，翻译遵循 CC BY-SA 4.0 许可协议