如何在卡片组中添加链接? [英] How can I add link in the card deck groups?

问题描述

我从这里得到参考:https://bootstrap-vue.js.org/docs/components/card/#card-deck-groups

这样的脚本:

<b卡组牌组><b-card title="标题"img-src="https://picsum.photos/300/300/?image=41"img-alt="Img"img-top><p class="card-text">这是一张更宽的卡片，下面有支持文字作为自然引入附加内容.此内容有点长.</p><div slot="footer"><small class="text-muted">上次更新时间为 3 分钟前</small>
</b-card><b-card title="标题"img-src="https://picsum.photos/300/300/?image=41"img-alt="Img"img-top><p class="card-text">这张卡片下面有支持文本作为自然导入到附加内容.</p><div slot="footer"><small class="text-muted">上次更新时间为 3 分钟前</small>

</b-card><b-card title="标题"img-src="https://picsum.photos/300/300/?image=41"img-alt="Img"img-top><p class="card-text">这是一张更宽的卡片，下面的支持文字是自然的引入额外的内容.这张卡片的内容更长比第一个表现出等高的动作.</p><div slot="footer"><small class="text-muted">上次更新时间为 3 分钟前</small>

</b-card></b-card-group>

我想在标题和图片中添加链接

我该怎么做?

解决方案

您必须从 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="/">标题</b-link><p class="card-text">这是一张更宽的卡片，下面有支持文字作为自然引入附加内容.此内容有点长.</p></b-card-body></b-card>

I get reference from here : https://bootstrap-vue.js.org/docs/components/card/#card-deck-groups

The script like this :

<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

How can I do it?

解决方案

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