Tumbu manjang

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. Perhatikeun kumaha CSS positionjalan , .stretched-linkteu bisa dicampurkeun jeung paling elemen tabel.

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

html

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

Kaseueuran komponén khusus henteu gaduh position: relativesacara standar, janten urang kedah nambihan .position-relativedieu pikeun nyegah tautan manjang di luar unsur indungna.

komponén custom kalawan link stretched

Ieu sababaraha eusi placeholder pikeun komponén custom. Ieu dimaksudkeun pikeun meniru kumaha sababaraha eusi dunya nyata bakal kasampak kawas, sarta kami nuju ngagunakeun dieu pikeun masihan komponén saeutik awak jeung ukuran.

Kamana wae

html

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

Kolom kalawan link stretched

conto sejen tina eusi placeholder pikeun komponén custom séjén ieu. Ieu dimaksudkeun pikeun meniru kumaha sababaraha eusi dunya nyata bakal kasampak kawas, sarta kami nuju ngagunakeun dieu pikeun masihan komponén saeutik awak jeung ukuran.

Kamana wae

html

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

Ngidentipikasi blok ngandung

Lamun link stretched sigana teu jalan, blok ngandung meureun bakal jadi 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.

html

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