Tumbu manteng

Jieun sagala unsur HTML atawa komponén Bootstrap clickable ku "manjang" link nested via CSS.

Tambihkeun .stretched-linkkana tautan pikeun ngajantenkeun blok anu ngandung tiasa diklik liwat ::afterunsur pseudo. Dina kalolobaan kasus, ieu ngandung harti yén unsur position: relative;nu ngandung tumbu jeung .stretched-linkkelas téh clickable.

Kartu gaduh position: relativesacara standar di Bootstrap, jadi dina hal ieu anjeun bisa aman nambahkeun .stretched-linkkelas ka link dina kartu tanpa parobahan HTML séjén.

Sababaraha tautan sareng target ketok henteu disarankeun nganggo tautan anu manjang. Nanging, sababaraha gaya positionsareng z-indexgaya tiasa ngabantosan upami diperyogikeun.

Kartu kalawan link stretched

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

Kamana wae

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

Objék média henteu gaduh position: relativesacara standar, janten urang kedah nambihan .position-relativedieu pikeun nyegah tautan manjang di luar objék média.

Média kalawan link stretched

Cras diuk amet nibh libero, dina 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 dina faucibus.

Kamana wae

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

Kolom sacara position: relativestandar, janten kolom anu tiasa diklik ngan ukur peryogi .stretched-linkkelas dina tautan. Sanajan kitu, manjang link ngaliwatan hiji sakabéh .rowmerlukeun .position-staticdina kolom jeung .position-relativedina baris.

Kolom kalawan link stretched

Kamana wae

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

Ngidentipikasi blok ngandung

Lamun link stretched sigana teu dianggo, blok ngandung meureun bakal cukang lantaranana. Sipat CSS di handap ieu bakal ngajantenkeun unsur anu ngandung blok:

A positionnilai lian tistatic
A transformatawa perspectivenilai lian tinone
A will-changenilai transformatawaperspective
Nilai filterlian ti noneatanapi will-changenilai filter(ngan dianggo dina Firefox)

Kartu kalawan tumbu stretched

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

Link stretched moal jalan di dieu, sabab position: relativeditambahkeun kana link

link stretched Ieu ngan bakal nyebarkeun ngaliwatan p-tag, sabab hiji transformasi dilarapkeun ka eta.

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