我从这里获得参考: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>
我想在标题和图像中添加链接
我该怎么办?
答案 0 :(得分:1)
您必须从b-card
删除title属性,而只是在b-link
内使用b-card-body
...
<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>