Strukket lenke
Gjør et hvilket som helst HTML-element eller Bootstrap-komponent klikkbart ved å "strekke" en nestet lenke via CSS.
Legg .stretched-link
til en lenke for å gjøre dens innholdsblokk klikkbar via et ::after
pseudoelement. I de fleste tilfeller betyr dette at et element med position: relative;
som inneholder en lenke med .stretched-link
klassen er klikkbart. Vær oppmerksom på at gitt hvordan CSS position
fungerer , .stretched-link
ikke kan blandes med de fleste tabellelementer.
Kort har position: relative
som standard i Bootstrap, så i dette tilfellet kan du trygt legge .stretched-link
klassen til en lenke på kortet uten andre HTML-endringer.
Flere lenker og trykkmål anbefales ikke med utstrakte lenker. Noen position
og z-index
stiler kan imidlertid hjelpe dersom dette skulle være nødvendig.
Kort med strukket lenke
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Gå et sted<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 fleste tilpassede komponenter har ikke position: relative
som standard, så vi må legge til .position-relative
her for å forhindre at koblingen strekker seg utenfor det overordnede elementet.
Tilpasset komponent med strukket lenke
Dette er noe plassholderinnhold for den egendefinerte komponenten. Det er ment å etterligne hvordan noe virkelig innhold vil se ut, og vi bruker det her for å gi komponenten litt kropp og størrelse.
Gå et sted<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>
Søyler med strukket lenke
En annen forekomst av plassholderinnhold for denne andre tilpassede komponenten. Det er ment å etterligne hvordan noe virkelig innhold vil se ut, og vi bruker det her for å gi komponenten litt kropp og størrelse.
Gå et sted<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>
Identifisere den inneholdende blokken
Hvis den utstrakte lenken ikke ser ut til å fungere, vil den inneholdende blokken sannsynligvis være årsaken. Følgende CSS-egenskaper vil gjøre et element til den inneholdende blokken:
- En
position
annen verdi ennstatic
- A
transform
ellerperspective
annen verdi ennnone
- En
will-change
verdi påtransform
ellerperspective
- En
filter
annen verdi ennnone
eller enwill-change
verdi avfilter
(fungerer bare på Firefox)
Kort med strukket lenker
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Strukket lenke vil ikke fungere her, fordi position: relative
er lagt til lenken
Denne utstrakte lenken vil bare bli spredt over p
-taggen, fordi en transformasjon blir brukt på den.
<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>