Skip to main content Skip to docs navigation
View on GitHub

連結延伸 (Stretched link)

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

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去

在一個連結上添加 .stretched-link 將可以使它的 containing block 變得可點擊。這是通過 ::after 偽元素達成的。在大多數情況下，這意味著具有 position: relative; 內包含帶有 .stretched-link 類別的連結的元素是可點擊的。請注意，鑑於 how CSS position works，.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
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>

辨別 containing block

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

  • static 以外的 position 值。
  • none 以外的 transform 或 perspective 值。
  • 在 transform 或 perspective 使用 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>