延伸链接

通过CSS“拉伸”嵌套链接,使任何HTML元素或Bootstrap组件均可点击。

Add .stretched-link 链接使其包含块通过点击 ::after 伪元素。在大多数情况下,这意味着具有 position: relative; 包含与 .stretched-link 该类是可点击的。

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

延伸链接不建议使用多个链接和点击目标。但是,有些 position and z-index 样式可以帮助您。

带有延伸链接的卡

一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。

<div class="card" style="width: 18rem;">
<svg aria-label="Card image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 卡图像盖 </title><rect fill="#868e96" height="100%" width="100%"></rect></svg>
<div class="card-body">
<h5 class="card-title"> 带有延伸链接的卡 </h5>
<p class="card-text"> 一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。 </p>
<a class="btn btn-primary stretched-link" href="#"> 去一个地方 </a>
</div>
</div>

媒体对象没有 position: relative 默认情况下,因此我们需要添加 .position-relative 这里可以防止链接延伸到媒体对象外部。

具有延伸链接的媒体

Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。

去一个地方

<div class="media position-relative">
<svg aria-label="Generic placeholder image" class="bd-placeholder-img mr-3" focusable="false" height="144" preserveaspectratio="xMidYMid slice" role="img" width="144" xmlns="http://www.w3.org/2000/svg"><title> 通用占位符图像 </title><rect fill="#868e96" height="100%" width="100%"></rect></svg>
<div class="media-body">
<h5 class="mt-0"> 具有延伸链接的媒体 </h5>
<p> Cras坐在gravida nulla的amet nibh libero。  Nulla vel metus scelerisque ante sollicitudin。  Cras purus odio,前庭在腐殖质处,tempus viverra turpis。  Fusce调味品nunc ac nisi寻常小菜鸟。  Donec lacinia在faucibus中抢夺了猫。 </p>
<a class="stretched-link" href="#"> 去一个地方 </a>
</div>
</div>

列是 position: relative 默认情况下,因此可点击列仅需要 .stretched-link 链接上的类。但是,将链接延伸到整个 .row 要求 .position-static 在列上 .position-relative 在行上。

具有拉伸链接的列

Cras坐在gravida nulla的amet nibh libero。 Nulla vel metus scelerisque ante sollicitudin。 Cras purus odio,前庭在腐殖质处,tempus viverra turpis。 Fusce调味品nunc ac nisi寻常小菜鸟。 Donec lacinia在faucibus中抢夺了猫。

去一个地方

<div class="row no-gutters bg-light position-relative">
<div class="col-md-6 mb-md-0 p-md-4">
<svg aria-label="Generic placeholder image" class="bd-placeholder-img w-100" focusable="false" height="200" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 通用占位符图像 </title><rect fill="#868e96" height="100%" width="100%"></rect></svg>
</div>
<div class="col-md-6 position-static p-4 pl-md-0">
<h5 class="mt-0"> 具有拉伸链接的列 </h5>
<p> Cras坐在gravida nulla的amet nibh libero。  Nulla vel metus scelerisque ante sollicitudin。  Cras purus odio,前庭在腐殖质处,tempus viverra turpis。  Fusce调味品nunc ac nisi寻常小菜鸟。  Donec lacinia在faucibus中抢夺了猫。 </p>
<a class="stretched-link" href="#"> 去一个地方 </a>
</div>
</div>

识别包含块

如果拉伸后的链接似乎无效,则包含块可能是原因。以下CSS属性将使元素成为包含块：

Aposition 以外的价值 static
Atransform or perspective 以外的价值 none
Awill-change 的价值 transform or perspective
Afilter 以外的价值 none or a will-change 的价值 filter （仅适用于Firefox）

带有延伸链接的卡片