Natiahnutý odkaz
Urobte kliknutie na akýkoľvek prvok HTML alebo komponent Bootstrap „natiahnutím“ vnoreného odkazu cez CSS.
Pridajte .stretched-link
k odkazu, aby sa na blok, ktorý obsahuje , dalo kliknúť prostredníctvom ::after
pseudo prvku. Vo väčšine prípadov to znamená, že na prvok position: relative;
, ktorý obsahuje prepojenie s .stretched-link
triedou, sa dá kliknúť.
Karty majú position: relative
štandardne v Bootstrape, takže v tomto prípade môžete pokojne pridať .stretched-link
triedu do odkazu na karte bez akýchkoľvek ďalších zmien HTML.
Pri natiahnutých odkazoch sa neodporúča používať viacero odkazov a cieľov klepnutia. Avšak, niektoré position
a z-index
štýly môžu pomôcť, ak je to potrebné.
Karta s natiahnutým odkazom
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
Ísť niekamMediálne objekty v predvolenom nastavení nemajú position: relative
, takže tu musíme pridať, aby sme .position-relative
zabránili pretiahnutiu odkazu mimo objekt média.
Médium s natiahnutým odkazom
Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Ísť niekamStĺpce sú position: relative
predvolene, takže klikateľné stĺpce vyžadujú iba .stretched-link
triedu na odkaze. Natiahnutie odkazu cez celok však .row
vyžaduje .position-static
stĺpec a .position-relative
riadok.
Stĺpce s natiahnutým odkazom
Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Ísť niekamIdentifikácia bloku, ktorý obsahuje
Ak sa zdá, že natiahnutý odkaz nefunguje, príčinou bude pravdepodobne blok, ktorý obsahuje . Nasledujúce vlastnosti CSS urobia z prvku blok obsahujúci:
- Iná
position
hodnota akostatic
- A
transform
aleboperspective
iná hodnota akonone
- Hodnota alebo
will-change
_transform
perspective
- Iná
filter
hodnotanone
alebowill-change
hodnotafilter
(funguje iba vo Firefoxe)
Karta s natiahnutými odkazmi
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
Natiahnutý odkaz tu nebude fungovať, pretože position: relative
je pridaný k odkazu
Tento natiahnutý odkaz sa rozšíri iba cez p
-tag, pretože sa naň použije transformácia.