Nyújtott link
Tegye bármelyik HTML-elemet vagy Bootstrap-komponenst kattinthatóvá egy beágyazott hivatkozás CSS-en keresztüli „kinyújtásával”.
Adjon .stretched-link
hozzá egy hivatkozást, hogy azt tartalmazó blokkot::after
pszeudoelemen keresztül kattinthatóvá tegye. A legtöbb esetben ez azt jelenti, hogy position: relative;
az osztályra mutató hivatkozást tartalmazó elem .stretched-link
kattintható.
A kártyák position: relative
alapértelmezés szerint a Bootstrapben vannak, így ebben az esetben nyugodtan hozzáadhatja az .stretched-link
osztályt a kártyán lévő hivatkozáshoz, minden egyéb HTML-módosítás nélkül.
Nyújtott hivatkozások esetén nem javasolt több hivatkozás és koppintási cél. Néhány position
és z-index
stílus azonban segíthet, ha erre szükség van.
Kártya feszített linkkel
Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.
Elmenni valahovaA médiaobjektumok alapértelmezés szerint nem rendelkeznek position: relative
, ezért ide kell adnunk .position-relative
, hogy megakadályozzuk, hogy a hivatkozás a médiaobjektumon kívülre nyúljon.
Nyújtott linkkel ellátott média
Cras sit amet nibh libero, gravida nulla. Nulla vel 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.
Elmenni valahovaAz oszlopok position: relative
alapértelmezés szerint vannak, így a kattintható oszlopokhoz csak az .stretched-link
osztályra van szükség a hivatkozáson. A hivatkozás teljes egészére való kiterjesztése azonban az oszlopon és a sorban .row
megköveteli ..position-static
.position-relative
Oszlopok feszített linkkel
Cras sit amet nibh libero, gravida nulla. Nulla vel 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.
Elmenni valahovaA tartalmazó blokk azonosítása
Ha úgy tűnik, hogy a megfeszített hivatkozás nem működik, valószínűleg a tartalmazó blokk lesz az oka. A következő CSS-tulajdonságok teszik az elemet tartalmazó blokkot:
- Más
position
érték, mintstatic
- A
transform
vagyperspective
más érték, mintnone
- A vagy
will-change
értéketransform
perspective
- Más
filter
értéknone
vagywill-change
értékfilter
(csak Firefoxon működik)
Kártya feszített linkekkel
Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.
A nyújtott hivatkozás itt nem fog működni, mert position: relative
hozzáadva van a hivatkozáshoz
Ez a kiterjesztett hivatkozás csak a -tag felett lesz elosztva p
, mert transzformációt alkalmaznak rá.