uitgerekte link
Maak elk HTML-element of Bootstrap-component klikbaar door een geneste link via CSS te "uitrekken".
Voeg toe .stretched-link
aan een link om het bevattende blok klikbaar te maken via een ::after
pseudo-element. In de meeste gevallen betekent dit dat een element met position: relative;
een link met de .stretched-link
klasse aanklikbaar is. Houd er rekening mee dat hoe CSS position
werkt , .stretched-link
niet kan worden gemengd met de meeste tabelelementen.
Kaarten staan position: relative
standaard in Bootstrap, dus in dit geval kun je de klasse veilig toevoegen .stretched-link
aan een link in de kaart zonder andere HTML-wijzigingen.
Meerdere links en tikdoelen worden niet aanbevolen bij uitgerekte links. Sommige stijlen position
en z-index
stijlen kunnen echter helpen als dit nodig is.
Kaart met uitgerekte link
Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.
Ergens heengaan<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 meeste gebruikerscomponenten hebben dit position: relative
standaard niet, dus we moeten het .position-relative
hier toevoegen om te voorkomen dat de link zich uitstrekt buiten het bovenliggende element.
Gebruikerscomponent met uitgerekte link
Dit is tijdelijke inhoud voor de gebruikerscomponent. Het is bedoeld om na te bootsen hoe sommige inhoud uit de echte wereld eruit zou zien, en we gebruiken het hier om het onderdeel een beetje body en grootte te geven.
Ergens heengaan<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 met uitgerekte link
Nog een instantie van tijdelijke aanduiding-inhoud voor deze andere gebruikerscomponent. Het is bedoeld om na te bootsen hoe sommige inhoud uit de echte wereld eruit zou zien, en we gebruiken het hier om het onderdeel een beetje body en grootte te geven.
Ergens heengaan<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>
Het bevattende blok identificeren
Als de uitgerekte link niet lijkt te werken, zal het bevattende blok waarschijnlijk de oorzaak zijn. De volgende CSS-eigenschappen maken van een element het bevattende blok:
- Een
position
andere waarde danstatic
- A
transform
ofperspective
andere waarde dannone
- Een
will-change
waarde vantransform
ofperspective
- Een
filter
andere waarde dannone
of eenwill-change
waarde vanfilter
(werkt alleen in Firefox)
Kaart met uitgerekte schakels
Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.
Uitgerekte link werkt hier niet, omdat position: relative
is toegevoegd aan de link
Deze uitgerekte link wordt alleen verspreid over de p
-tag, omdat er een transformatie op wordt toegepast.
<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>