Skip to main content Skip to docs navigation
View on GitHub

延伸链接(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)不支持多个链接和点击目标。但是,如果需要的话,你可以通过添加一些 positionz-index 样式来实现。

Card image cap
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 类,以防止链接溢出到父元素外。

Generic placeholder image
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>
Generic placeholder image
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 以外的值
  • transformperspective 设置 none 以外的值
  • will-change 设置为 transformperspective
  • filter 设置 none 以外的值,或者为 will-change 设置为 filter (仅适用于 Firefox 浏览器)
Card image cap
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>