Stretched link
Meitsje elk HTML-elemint as Bootstrap-komponint te klikken troch in geneste keppeling fia CSS te "stretchjen".
Tafoegje .stretched-link
oan in keppeling om it befetsjende blok klikber te meitsjen fia in ::after
pseudo-elemint. Yn 'e measte gefallen betsjut dit dat in elemint position: relative;
dêr't in keppeling mei de .stretched-link
klasse mei befettet, klikber is. Tink derom, jûn hoe't CSS position
wurket , .stretched-link
kin net mingd wurde mei de measte tabeleleminten.
Kaarten hawwe position: relative
standert yn Bootstrap, dus yn dit gefal kinne jo feilich tafoegje de .stretched-link
klasse oan in keppeling yn de kaart sûnder oare HTML feroarings.
Meardere keppelings en tapdoelen wurde net oanrikkemandearre mei útwreide keppelings. Guon position
en z-index
stilen kinne lykwols helpe as dit nedich is.
Kaart mei útwreide keppeling
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Earne hinne gean<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>
De measte oanpaste komponinten hawwe net position: relative
standert, dus wy moatte de .position-relative
hjir tafoegje om foar te kommen dat de keppeling bûten it âlderelemint strekt.
Oanpaste komponint mei útwreide keppeling
Dit is wat plakhâlder ynhâld foar de oanpaste komponint. It is bedoeld om te imitearjen hoe guon ynhâld yn 'e echte wrâld der útsjen soe, en wy brûke it hjir om it komponint in bytsje lichem en grutte te jaan.
Earne hinne gean<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>
Kolommen mei útwreide keppeling
In oare eksimplaar fan plakhâlder ynhâld foar dizze oare oanpaste komponint. It is bedoeld om te imitearjen hoe guon ynhâld yn 'e echte wrâld der útsjen soe, en wy brûke it hjir om it komponint in bytsje lichem en grutte te jaan.
Earne hinne gean<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>
Identifikaasje fan it befetsjende blok
As de útstrekte keppeling net liket te wurkjen, sil it befetsjende blok wierskynlik de oarsaak wêze. De folgjende CSS-eigenskippen sille in elemint it befetsjende blok meitsje:
- In
position
wearde oars asstatic
- A
transform
ofperspective
wearde oars asnone
- In
will-change
wearde fantransform
ofperspective
- In
filter
wearde oars asnone
of inwill-change
wearde fanfilter
(wurket allinnich op Firefox)
Kaart mei útwreide keppelings
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Stretched keppeling sil net wurkje hjir, omdat position: relative
wurdt tafoege oan de keppeling
Dizze útwreide keppeling sil allinich ferspraat wurde oer de p
-tag, om't der in transformaasje op tapast wurdt.
<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>