使用引导卡作为超链接

本文介绍了使用引导卡作为超链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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="maxcdn.bootstrapcdn/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card" style="width: 15rem; display: inline-block"> <img class="card-img-top" src="placeholdit.imgix/~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="placeholdit.imgix/~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="maxcdn.bootstrapcdn/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card" style="width: 15rem; display: inline-block"> <img class="card-img-top" src="placeholdit.imgix/~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="placeholdit.imgix/~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>