Izstiepta saite
Padariet jebkuru HTML elementu vai Bootstrap komponentu klikšķināmu, “izstiepjot” ligzdotu saiti, izmantojot CSS.
Pievienojiet .stretched-link
saitei, lai padarītu to saturošo bloku klikšķināmu, izmantojot ::after
pseidoelementu. Vairumā gadījumu tas nozīmē, ka elements ar position: relative;
saiti uz .stretched-link
klasi ir noklikšķināms. Lūdzu, ņemiet vērā, kā darbojas CSSposition
, .stretched-link
to nevar sajaukt ar lielāko daļu tabulas elementu.
Kartēm position: relative
pēc noklusējuma ir Bootstrap, tāpēc šajā gadījumā varat droši pievienot .stretched-link
klasi saitei kartē bez citām HTML izmaiņām.
Ar izstieptām saitēm nav ieteicamas vairākas saites un pieskaršanās mērķi. Tomēr daži position
un z-index
stili var palīdzēt, ja tas ir nepieciešams.
Karte ar izstieptu saiti
Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.
Aizej kaut kur<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>
Lielākajai daļai pielāgoto komponentu position: relative
pēc noklusējuma nav, tāpēc mums ir jāpievieno .position-relative
šeit, lai novērstu saites izstiepšanos ārpus vecākelementa.
Pielāgots komponents ar izstieptu saiti
Šis ir viettura saturs pielāgotajam komponentam. Tas ir paredzēts, lai atdarinātu to, kā izskatītos kāds reālās pasaules saturs, un mēs to izmantojam šeit, lai piešķirtu komponentam nedaudz ķermeņa un izmēra.
Aizej kaut kur<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>
Kolonnas ar izstieptu saiti
Vēl viens viettura satura gadījums šim citam pielāgotajam komponentam. Tas ir paredzēts, lai atdarinātu to, kā izskatītos kāds reālās pasaules saturs, un mēs to izmantojam šeit, lai piešķirtu komponentam nedaudz ķermeņa un izmēra.
Aizej kaut kur<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>
Saturošā bloka identificēšana
Ja šķiet, ka izstieptā saite nedarbojas, iespējams, iemesls būs saturošais bloks . Tālāk norādītie CSS rekvizīti padarīs elementu par saturošu bloku:
position
Vērtība, kas navstatic
- A
transform
vaiperspective
vērtība, kas navnone
will-change
Vērtībatransform
vai _perspective
- Vērtība ,
filter
kas navnone
vaiwill-change
vērtībafilter
(darbojas tikai pārlūkprogrammā Firefox)
Karte ar izstieptām saitēm
Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.
Izstiepta saite šeit nedarbosies, jo position: relative
ir pievienota saitei
Šī izstieptā saite tiks izplatīta tikai pa p
tagu -, jo tai tiek piemērota transformācija.
<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>