CSS 使用引导卡作为超链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49554070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using bootstrap cards as a hyperlink
提问by D M
I have a bootstrap card Which is used as a link.
我有一张引导卡，用作链接。
Trying to wrap it with <a>changes all of the styling of the card.
试图用<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>How should I wrap the card in order to preserve its looks and use it as a link?
我应该如何包装卡片以保持其外观并将其用作链接？
采纳答案by Bhuwan
Its because <a>tags has a default blue color from user agent browser. Try to add a class to the link and set color:inheritto that class
这是因为<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>回答by Mladen Mitrovic
If you are using Bootstrap 4.3 you don't have to wrap card with <a>tag, but instead put it inside card-body, and use stretched-linkclass. This is much cleaner way.
如果您使用的是 Bootstrap 4.3，则不必用<a>标签包装卡片，而是将其放入card-body，并使用stretched-link类。这是更清洁的方式。
Visit https://getbootstrap.com/docs/4.3/utilities/stretched-link/for more details.
访问https://getbootstrap.com/docs/4.3/utilities/stretched-link/了解更多详情。
If you can't use Bootstrap 4.3 this is styling for stretched-linkclass:
如果你不能使用 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);
}
Here is the example:
这是示例：
<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>回答by Turnip
Instead of wrapping the .cardin a <a>, you could use a <a>as the card element instead of a <div>.
您可以将 a用作卡片元素而不是 a ，而不是将 a包装.card在a 中。<a><a><div>
This will allow you to easily override the CSS to remove the default <a>styles:
这将允许您轻松覆盖 CSS 以删除默认<a>样式：
a.card,
a.card:hover {
color: #212529;
text-decoration: none;
}<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="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>
</a>回答by Diego Venancio
Very simple with Stretched link
使用拉伸链接非常简单
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</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="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
回答by Nhan
You can put text-darkutility class to the element to have the same appearance.
您可以将text-dark实用程序类放在元素上以具有相同的外观。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<a href="">
<div class="card text-dark" 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>回答by Tig7r
Try to add Display: Block to the link itself. Use your browsers Developer Tools (F12) and hover over the link to see if you need to add Height:auto perhaps.
尝试将 Display: Block 添加到链接本身。使用您的浏览器开发人员工具 (F12) 并将鼠标悬停在链接上，看看您是否需要添加 Height:auto 。
回答by fateme
I had the same problem. I fixed it with this trick. You can specify the color whatever you like and put a 00 at the end of the color code to make it transparent this way you make the style invisible. e.g.
我有同样的问题。我用这个技巧修复了它。您可以指定任何您喜欢的颜色，并在颜色代码的末尾放置一个 00 以使其透明，这样您就可以使样式不可见。例如
<a href="" style="color: #83577500; ">
