延伸鏈接（Stretched link）
透過CSS將連接“延伸”，令任何HTML元素或Bootstrap元件變得可點擊。
在一個連接上添加.stretched-link將可以使它的containing block變得可點擊，這是透過：：after虛擬元素達成的。在大多數(shù)的情況下，這意味著本身帶有position: relative；，且內(nèi)部包裝了具有.stretched-link類別之連接的元素將變得可點擊。
Bootstrap中卡片元件預(yù)設(shè)便帶有position: relative，因此在這個情況下你可以安全的在卡片中的連接添加.stretched-link，而無須更改任何其他HTML。
對于拉伸鏈接，不建議使用多個鏈接和輕觸目標(biāo)。但是，如果需要， 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>大多數(shù)自定義的元件并不預(yù)設(shè)帶有position: relative，因此必須添加position: relative，避免連接延伸到父容器以外的地方。
Custom component with stretched link
This is some placeholder content for the 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="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>This is some placeholder content for the 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>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 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>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>識別包含塊
如果拉伸的鏈接似乎不起作用，則可能是包含塊的原因。以下CSS屬性將使元素成為包含塊：
- static以外的position值。
- none以外的transform或perspective值。
- 在transform或perspective使用will-change作為值。
- none以外的filter值，或是在filter使用will-change作為值（只會在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>