Naka-stretch na link
Gawing naki-click ang anumang elemento ng HTML o bahagi ng Bootstrap sa pamamagitan ng "pag-unat" ng isang nested na link sa pamamagitan ng CSS.
Idagdag .stretched-link
sa isang link upang gawing naki-click ang naglalaman ng block nito sa pamamagitan ng ::after
pseudo element. Sa karamihan ng mga kaso, nangangahulugan ito na ang isang elemento position: relative;
na naglalaman ng isang link na may .stretched-link
klase ay naki-click.
Ang mga card ay may position: relative
default sa Bootstrap, kaya sa kasong ito maaari mong ligtas na idagdag ang .stretched-link
klase sa isang link sa card nang walang anumang mga pagbabago sa HTML.
Hindi inirerekomenda ang maraming link at i-tap ang mga target na may mga naka-stretch na link. Gayunpaman, maaaring makatulong ang ilan position
at mga z-index
istilo kung kinakailangan ito.
Card na may nakaunat na link
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Pumunta sa isang lugarAng mga bagay sa media ay walang bilang position: relative
default, kaya kailangan nating idagdag ang .position-relative
dito upang maiwasan ang pag-uunat ng link sa labas ng bagay ng media.
Media na may nakaunat na link
Cras sit amet nibh libero, in 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 sa faucibus.
Pumunta sa isang lugarBilang position: relative
default ang mga column, kaya kailangan lang ng mga naki-click na column ang .stretched-link
klase sa isang link. Gayunpaman, ang pag-stretch ng isang link sa kabuuan ay .row
nangangailangan .position-static
sa column at .position-relative
sa row.
Mga column na may naka-stretch na link
Cras sit amet nibh libero, in 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 sa faucibus.
Pumunta sa isang lugarPagkilala sa naglalaman ng bloke
Kung ang nakaunat na link ay tila hindi gumagana, ang naglalaman ng bloke ay malamang na ang dahilan. Ang mga sumusunod na katangian ng CSS ay gagawa ng isang elemento na naglalaman ng bloke:
- Isang
position
halaga maliban sastatic
- A
transform
operspective
halaga maliban sanone
- Isang
will-change
halaga ngtransform
operspective
- Isang
filter
halaga maliban sanone
o isangwill-change
halaga ngfilter
(gumagana lamang sa Firefox)
Card na may mga naka-stretch na link
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Ang naka-stretch na link ay hindi gagana dito, dahil position: relative
idinagdag ito sa link
Ikakalat lang ang naka- stretch na linkp
na ito sa -tag, dahil may inilapat na pagbabago rito.