延申链接

通过CSS“拉伸”嵌套链接，让任何HTML元素或Bootstrap组件都可以点击。

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

在Bootstrap中，Cards默认具有 position: relative 属性，所以在这种情况下，你可以安全地将 .stretched-link 类添加到card中的链接中，而无需进行任何其他HTML更改。

对于延申链接，不建议使用多个链接和点击目标。然而，如果需要的话，一些位置和 z-index 样式可以帮助实现这一点。

Card with stretched link

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>

大多数自定义组件默认情况下都没有 position: relative，所以我们需要在这里添加.position-relative，以防止链接延伸到父元素之外。

Custom component with stretched link

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Go somewhere

<div class="d-flex position-relative">
<img src="..." class="flex-shrink-0 me-3" alt="...">
<div>
<h5 class="mt-0">Custom component with stretched link</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<a href="#" class="stretched-link">Go somewhere</a>
</div>
</div>

Columns with stretched link

Go somewhere

<div class="row g-0 bg-light position-relative">
<div class="col-md-6 mb-md-0 p-md-4">
<img src="..." class="w-100" alt="...">
</div>
<div class="col-md-6 p-4 ps-md-0">
<h5 class="mt-0">Columns with stretched link</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<a href="#" class="stretched-link">Go somewhere</a>
</div>
</div>

识别被包含得块元素

如果延申链接看起来似乎不工作了，包含块元素可能就是是原因。以下CSS属性将使一个元素成为包含块元素:

不是静态的position 值
transform 或 perspective ，而不是 none
transform 或 perspective 的 will-change 值
非none的 filter 值或将改变的 filter 值(仅适用于Firefox)

Card with stretched links

Some quick example text to build on the card title and make up the bulk of the card's content.

Stretched link will not work here, because position: relative is added to the link

This stretched link will only be spread over the p-tag, because a transform is applied to it.

<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched links</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">
  <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
</p>
<p class="card-text bg-light" style="transform: rotate(0);">
  This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
</p>
</div>
</div>