通过CSS “stretching” 嵌套链接，使任何HTML元素或引导程序组件都可以单击。

将 .stretched-link 添加到一个链接，使其包含的块可以通过 a::after 伪元素单击。在大多数情况下，这意味着一个 position:relative 的元素，它包含一个带有 .stretched-link 类的链接，是可以点击的。

在Bootstrap中，卡片有 position:relative，因此在这种情况下，您可以安全地将 .stretched-link 类添加到卡片中的链接，而无需任何其他HTML更改。

多个链接和点击目标不建议使用延伸链接。但是，如果需要，一些 position 和 z-index 样式可以提供帮助。

<div class="card card-bordered" style="width: 18rem;">
  <img src="images/slide/img-slide-1.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">东南纪事</h5>
    <p class="card-text">该书专记南明唐王、鲁王及其臣下的历史，反映了南明抗清的一些重要史实。资料丰富，取舍谨严，为清初稗史中的上乘之作。</p>
    <a href="#!" class="btn btn-primary stretched-link">点击查看详细</a>
  </div>
</div>

默认情况下，媒体对象没有 position:relative，因此需要在此处添加 .position-relative 以防止链接延伸到媒体对象之外。

<div class="media position-relative">
  <img src="images/users/avatar-1.png" class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">杨家将传</h5>
    <p>《北宋志传》(又名《杨家将传》、《杨家将演义》)写杨家将抗辽事迹。作者广泛搜集了宋元时期民间流传的杨家将故事、宋元话本和元杂剧中的有关剧目为基础加工整理而成。作品从北汉主刘钧摒逐忠臣，呼延赞出世写起，到杨业归宋，杨宗保大破天门阵，十二寡妇征西夏为止。通过杨业一门世代抵抗契丹侵扰的事迹，贯串了反抗外族入侵，歌颂抗敌英雄，谴责奸佞卖国的主题。</p>
    <a href="#!" class="stretched-link">点击查看详细</a>
  </div>
</div>

默认情况下，列是 position:relative，因此可单击的列只需要链接上的 .stretched-link 类。但是，在整个 .row 上延伸链接需要 .position-static 在列上，而 .position-relative 在行上。

<div class="row no-gutters bg-light position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <img src="images/img-placeholder.png" class="w-100" height="200" alt="...">
  </div>
  <div class="col-md-6 position-static p-4 pl-md-0">
    <h5 class="mt-0">天龙八部</h5>
    <p>《天龙八部》是著名作家金庸的武侠代表作。著于1963年，历时4年创作完成（部分内容曾由倪匡代笔撰写），前后共有三版，并在2005年第三版中经历6稿修订，结局改动较大。</p>
    <a href="#!" class="stretched-link">点击查看详细</a>
  </div>
</div>

识别包含块

如果延伸的链接看起来不起作用，则包含块可能是原因。以下CSS属性将使元素成为包含块：

• position 值不是 static
• transform 或者 perspective 值不是 none
• will-change 值是 transform 或者 perspective
• filter 值不是none，或者 will-change 值是 filter（仅适用于Firefox）

<div class="card card-bordered" style="width: 18rem;">
  <img src="images/slide/img-slide-5.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">神雕侠侣</h5>
    <p class="card-text">讲述了南宋末年，杨过和小龙女经历了一番凄美爱情与江湖恩怨的故事。一样的故事，不一样的情节，力求展现一个可歌可泣的江湖往事。</p>
    <p class="card-text">
      <a href="#!" class="stretched-link text-danger" style="position: relative;">拉伸链接在此处不起作用，因为 <code>position: relative</code> 已添加到链接中</a>
    </p>
    <p class="card-text bg-light" style="transform: rotate(0);">
      这个 <a href="#!" class="text-warning stretched-link">延伸链接</a> 将只分布在 <code>p</code> 标签, 因为 一个<code>transform</code> 被应用到它。
    </p>
  </div>
</div>