Sträckt länk
Gör alla HTML-element eller Bootstrap-komponenter klickbara genom att "sträcka ut" en kapslad länk via CSS.
Lägg .stretched-link
till i en länk för att göra dess innehållsblock klickbart via ett ::after
pseudoelement. I de flesta fall betyder det att ett element med position: relative;
som innehåller en länk till .stretched-link
klassen är klickbart.
Kort har position: relative
som standard i Bootstrap, så i det här fallet kan du säkert lägga till .stretched-link
klassen till en länk på kortet utan några andra HTML-ändringar.
Flera länkar och tryckmål rekommenderas inte med sträckta länkar. Vissa position
och z-index
stilar kan dock hjälpa om detta skulle behövas.
Kort med sträckt länk
Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.
Gå någonstansMediaobjekt har inte som position: relative
standard, så vi måste lägga till .position-relative
här för att förhindra att länken sträcker sig utanför mediaobjektet.
Media med sträckt länk
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate vid, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
Gå någonstansKolumner är position: relative
som standard, så klickbara kolumner kräver bara .stretched-link
klassen på en länk. Men att sträcka en länk över en hel .row
kräver .position-static
på kolumnen och .position-relative
på raden.
Kolumner med sträckt länk
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate vid, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
Gå någonstansIdentifiera innehållsblocket
Om den sträckta länken inte verkar fungera är det troligtvis det innehållande blocket som är orsaken. Följande CSS-egenskaper kommer att göra ett element till det innehållande blocket:
- Ett
position
annat värde änstatic
- A
transform
ellerperspective
värde annat ännone
- Ett
will-change
värde påtransform
ellerperspective
- Ett
filter
annat värde ännone
eller ettwill-change
värde påfilter
(fungerar bara på Firefox)
Kort med sträckta länkar
Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.
Sträckt länk kommer inte att fungera här, eftersom position: relative
den läggs till i länken
Denna sträckta länk kommer bara att spridas över p
-taggen, eftersom en transformation appliceras på den.