如何在卡片组组中添加链接？答案

【问题标题】：How can I add link in the card deck groups?如何在卡片组组中添加链接？
【发布时间】：2019-03-05 05:37:53
【问题描述】：

我从这里得到参考：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>

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

我该怎么做？

【问题讨论】：

链接是什么意思？我不知道当你点击图片或标题时，你会重定向到另一个页面？
@boussadjra brahim 是的，我就是这个意思
你可以用锚元素<a href="someurl"> <b-card>....</b-card></a>包裹你的b-card标签
@boussadjra brahim 我只想在标题和图片中提供一个链接。不是全部
ok ' 是什么意思但是光标样式变成了没有 href 的链接 '

标签： twitter-bootstrap vue.js vuejs2 bootstrap-4 vue-component

【解决方案1】：

您必须从b-card 中删除title 属性，而只需在b-card-body 中使用b-link...

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

【讨论】：

也许你能再次帮助我。看看这个：stackoverflow.com/questions/52651862/…