Skip to main content Skip to docs navigation
View on GitHub

連結延伸 (Stretched link)

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

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

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

Card image cap
帶有延伸連結的卡片

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,避免連結延伸到父容器以外的地方。

Generic placeholder image
有延伸連結的自定義元件

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>
Generic placeholder image
帶有延伸連結的 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 以外的 transformperspective 值。
  • transformperspective 使用 will-change 作為值。
  • none 以外的 filter 值,或是在 filter 使用 will-change 作為值 (只會在 Firefox 作用)。
Card image cap
帶有延伸連結的卡片

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>