Tumbu manteng
Jieun sagala unsur HTML atawa komponén Bootstrap clickable ku "manjang" link nested via CSS.
Tambihkeun .stretched-link
kana tautan pikeun ngajantenkeun blok anu ngandung tiasa diklik liwat ::after
unsur pseudo. Dina kalolobaan kasus, ieu ngandung harti yén unsur position: relative;
nu ngandung tumbu jeung .stretched-link
kelas téh clickable. Perhatikeun kumaha CSS position
jalan , .stretched-link
teu bisa dicampurkeun jeung paling elemen tabel.
Kartu gaduh position: relative
sacara standar di Bootstrap, jadi dina hal ieu anjeun bisa aman nambahkeun .stretched-link
kelas ka link dina kartu tanpa parobahan HTML séjén.
Sababaraha tautan sareng target ketok henteu disarankeun nganggo tautan anu manjang. Nanging, sababaraha gaya position
sareng z-index
gaya 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>
Kaseueuran komponén khusus henteu gaduh position: relative
sacara standar, janten urang kedah nambihan .position-relative
dieu pikeun nyegah tautan manjang di luar unsur indungna.
komponén custom kalawan link stretched
Ieu sababaraha eusi placeholder pikeun komponén custom. Hal 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<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. Hal 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<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 dianggo, blok ngandung meureun bakal cukang lantaranana. Sipat CSS di handap ieu bakal ngajantenkeun unsur anu ngandung blok:
- A
position
nilai lian tistatic
- A
transform
atawaperspective
nilai lian tinone
- A
will-change
nilaitransform
atawaperspective
- Nilai
filter
lian tinone
atanapiwill-change
nilaifilter
(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: relative
ditambahkeun 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>