拉伸链接(Stretched link)

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

在本页面

向链接添加 .stretched-link ，使其包含块可通过 ::after伪元素单击。在大多数情况下，这意味着position: relative; 的元素包含 .stretched-link 的链接是可单击的。

卡片在 Bootstrap 中默认具有 position: relative，此在这种情况下，您可以安全地将 .stretched-link 类添加到卡片中的链接，而无需任何其他HTML更改。

对于拉伸链接，不建议使用多个链接和点击目标。但是，如果需要，某些 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.

<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属性将使元素成为包含块：

一个除了 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>