延伸链接
通过 CSS “延伸(stretching)”嵌套的链接,从而使任何 HTML 元素或 Bootstrap 组件变为可点击的。更新于: 2023-04-30 14:28:21 查看: 337
发布于: 2021-9-10 19:57 发布者: 大米
为链接添加 .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>
大部分自定义组件默认情况下都没有设置 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>
识别包含块
如果延伸链接(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>