如何在卡片组组中添加链接? [英] How can I add link in the card deck groups?
本文介绍了如何在卡片组组中添加链接?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我从这里获取参考: https://bootstrap-vue.js.org/docs/components/card/#card-deck-groups
这样的脚本:
<div>
<b-card-group deck>
<b-card title="Title"
img-src="https://picsum.photos/300/300/?image=41"
img-alt="Img"
img-top>
<p class="card-text">
This is a wider card with supporting text below as a
natural lead-in to additional content. This content
is a little bit longer.
</p>
<div slot="footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</b-card>
<b-card title="Title"
img-src="https://picsum.photos/300/300/?image=41"
img-alt="Img"
img-top>
<p class="card-text">
This card has supporting text below as a natural lead-in
to additional content.
</p>
<div slot="footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</b-card>
<b-card title="Title"
img-src="https://picsum.photos/300/300/?image=41"
img-alt="Img"
img-top>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This card has even longer content
than the first to show that equal height action.
</p>
<div slot="footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</b-card>
</b-card-group>
</div>
我想在标题和图像中添加链接
I want to add link in the title and image
我该怎么办?
推荐答案
您必须从b-card
中删除title属性,而只需在b-card-body
中使用b-link
...
You have to remove the title attribute from the b-card
and just use a b-link
inside a b-card-body
instead...
<b-card img-src="https://picsum.photos/300/300/?image=41"
img-alt="Img"
img-top
>
<b-card-body>
<b-link to="/">
Title
</b-link>
<p class="card-text">
This is a wider card with supporting text below as a
natural lead-in to additional content. This content
is a little bit longer.
</p>
</b-card-body>
</b-card>
这篇关于如何在卡片组组中添加链接?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文