延伸链接

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

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

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

多个链接和点击目标不建议使用延伸链接。但是,如果需要,一些 positionz-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 在行上。

...
天龙八部

《天龙八部》是著名作家金庸的武侠代表作。著于1963年,历时4年创作完成(部分内容曾由倪匡代笔撰写),前后共有三版,并在2005年第三版中经历6稿修订,结局改动较大。

点击查看详细
<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)
...
神雕侠侣

讲述了南宋末年,杨过和小龙女经历了一番凄美爱情与江湖恩怨的故事。一样的故事,不一样的情节,力求展现一个可歌可泣的江湖往事。

拉伸链接在此处不起作用,因为 position: relative 已添加到链接中

这个 延伸链接 将只分布在 p 标签, 因为 一个transform 被应用到它。

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