View on GitHub

連結延伸 (Stretched link)

透過 CSS 將連結 “延伸”，令任何 HTML 元素或 Bootstrap 元件變得可點擊。

在一個連結上添加 .stretched-link 將可以使它的 containing block 變得可點擊，這是透過 ::after 虛擬元素達成的。在大多數的情況下，這意味著本身帶有 position: relative;，且內部包裝了具有 .stretched-link 類別之連結的元素將變得可點擊。

在 Bootstrap 中卡片元件預設便帶有 position: relative，因此在這個情況下你可以安全的在卡片中的連結添加 .stretched-link，而無須更改任何其他 HTML。

帶有延伸連結的卡片

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">帶有延伸連結的卡片</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，避免連結延伸到父容器以外的地方。

有延伸連結的自定義元件

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">有延伸連結的自定義元件</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

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

辨別 containing block

如果延伸連結沒有確實運作，containing block 將可能是問題所在。以下的 CSS 屬性將使一個元素成為 containing block。

static 以外的 position 值。
none 以外的 transform 或 perspective 值。
在 transform 或 perspective 使用 will-change 作為值。
none 以外的 filter 值，或是在 filter 使用 will-change 作為值 (只會在 Firefox 作用)。

帶有延伸連結的卡片

Some quick example text to build on the card title and make up the bulk of the card's content.

在此延伸連結不會運作，因為 position: relative 被添加在連結上

此延伸連結只會延伸至 p 標籤, 因為 p 標籤被添加了 transform。

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">帶有延伸連結的卡片</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;">在此延伸連結不會運作，因為 <code>position: relative</code> 被添加在連結上</a>
    </p>
    <p class="card-text bg-light" style="transform: rotate(0);">
      此 <a href="#" class="text-warning stretched-link">延伸連結</a> 只會延伸至 <code>p</code> 標籤, 因為 <code>p</code> 標籤被添加了 transform。</p>
  </div>
</div>