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.
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 stedMedieobjekter har ikke position: relative
som standard, så vi må legge til .position-relative
her for å forhindre at lenken strekker seg utenfor medieobjektet.
Media med strukket lenke
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
Gå et stedKolonner er position: relative
som standard, så klikkbare kolonner krever bare .stretched-link
klassen på en lenke. Men å strekke en lenke over en hel .row
krever .position-static
på kolonnen og .position-relative
på raden.
Søyler med strukket lenke
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
Gå et stedIdentifisere 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 strakte lenker
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Strukket lenke vil ikke fungere her, fordi position: relative
den er lagt til i lenken
Denne utstrakte lenken vil bare bli spredt over p
-taggen, fordi en transformasjon blir brukt på den.