延伸链接（Stretched link）
通过 CSS “延伸（stretching）”嵌套的链接，从而使任何 HTML 元素或 Bootstrap 组件变为可点击的。
为链接添加 .stretched-link 类以使 包含该链接的块级元素 通过 ::after 伪元素变成可点击的区域。在大多数情况下，这意味着如果某个设置了 position: relative; 属性的元素包含一个带有 .stretched-link 类的链接的话，改元素将变成可点击的区域。请注意，鉴于 CSS position 的工作原理，.stretched-link 类不能与大多数表格元素混合使用。
Bootsrap 中的卡片（card）组件默认被设置了 position: relative 属性，因此在这种情况下，你可以安全地向卡片（card）组件中所包含的链接添加 .stretched-link 类，并且无需修改 HTML 代码。
延伸链接（stretched link）不支持多个链接和点击目标。但是，如果需要的话，你可以通过添加一些 position 和 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>媒体对象（media object）组件默认情况下没有设置 position: relative 属性，因此需要自己添加 .position-relative 类，以防止链接溢出到父元素外。
Media with stretched link
This is some placeholder content for the media object. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.
Go somewhere<div class="media position-relative">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media with stretched link</h5>
<p>This is some placeholder content for the media object. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
<a href="#" class="stretched-link">Go somewhere</a>
</div>
</div>栅格系统中的列（column）默认被设置为 position: relative 属性，因此，要想一个列（column）是可点击的，只需为其内部的链接添加 .stretched-link 类即可。但是，如果想要将链接覆盖到整个行（.row），则需要为列（column）添加 .position-static 类，并且为行（.row）添加 .position-relative 类。
Columns with stretched link
Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.
Go somewhere<div class="row no-gutters 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 position-static p-4 pl-md-0">
<h5 class="mt-0">Columns with stretched link</h5>
<p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
<a href="#" class="stretched-link">Go somewhere</a>
</div>
</div>识别包含块
如果延伸链接（stretched link）不起作用，则可能是 包含该链接的块级元素 导致的。以下 CSS 属性可以让包含延伸链接（stretched link）的元素变为块级元素：
- 为
position设置static以外的值 - 为
transform或perspective设置none以外的值 - 为
will-change设置为transform或perspective - 为
filter设置none以外的值，或者为will-change设置为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>