使用引导卡作为超链接 [英] Using bootstrap cards as a hyperlink

问题描述

我有一个用作链接的引导卡.

I have a bootstrap card Which is used as a link.

尝试用< a> 包装它会更改卡的所有样式.

Trying to wrap it with <a> changes all of the styling of the card.

<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>

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

How should I wrap the card in order to preserve its looks and use it as a link?

推荐答案

这是因为< a> 标签在用户代理浏览器中具有默认的蓝色.尝试将一个类添加到链接中，然后将 color:inherit 设置为该类

Its because <a> tags has a default blue color from user agent browser. Try to add a class to the link and set color:inherit to that class

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>

这篇关于使用引导卡作为超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！