Source

拉伸鏈接

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

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

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

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

Card image cap
帶有拉伸鏈接的卡片

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

去一個地方
<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此處添加,以防止鏈接拉伸到媒體對象之外。

Generic placeholder image
帶有拉伸鏈接的媒體

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行上。

Generic placeholder image
帶有拉伸鏈接的列

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

  • 以外的positionstatic
  • Atransformperspective其他值none
  • will-change值為transform或_perspective
  • 一個filter不同於none或一個will-changefilter(僅適用於 Firefox)
Card image cap
帶有拉伸鏈接的卡片

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

拉伸鏈接在這裡不起作用,因為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>