拉伸鏈接

通過 CSS“拉伸”嵌套鍊接，使任何 HTML 元素或 Bootstrap 組件可點擊。

添加.stretched-link到鏈接以使其包含塊可通過::after偽元素單擊。在大多數情況下，這意味著position: relative;包含.stretched-link類鏈接的元素是可點擊的。

Bootstrap 中默認有卡片position: relative，因此在這種情況下，您可以安全地將.stretched-link類添加到卡片中的鏈接，而無需任何其他 HTML 更改。

不建議使用拉伸鏈接使用多個鏈接和點擊目標。但是，如果需要，一些position和z-index样式可以提供幫助。

帶有拉伸鏈接的卡片

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

<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此處添加，以防止鏈接拉伸到媒體對象之外。

帶有拉伸鏈接的媒體

Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin。Cras purus odio，前庭在 vulputate，tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。

去一個地方

<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>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>

列是position: relative默認的，所以可點擊的列只需要.stretched-link鏈接上的類。但是，將鏈接延伸到整個區域.row需要.position-static在列和.position-relative行上。

帶有拉伸鏈接的列

去一個地方

<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>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 屬性將使元素成為包含塊：

以外的position值static
Atransform或perspective其他值none
will-change值為transform或_perspective
一個filter不同於none或一個will-change值filter（僅適用於 Firefox）

帶有拉伸鏈接的卡片

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

拉伸鏈接在這裡不起作用，因為position: relative被添加到鏈接中

此拉伸鏈接將僅分佈在p-tag 上，因為對其應用了轉換。

<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>