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. Pakitandaan kung paano gumagana ang CSSposition
, .stretched-link
hindi maaaring ihalo sa karamihan ng mga elemento ng talahanayan.
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 lugar<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
Karamihan sa mga custom na bahagi ay walang position: relative
bilang default, kaya kailangan naming idagdag ang .position-relative
dito upang maiwasan ang pag-abot ng link sa labas ng pangunahing elemento.
Custom na bahagi na may naka-stretch na link
Ito ay ilang placeholder na nilalaman para sa custom na bahagi. Ito ay nilayon upang gayahin kung ano ang magiging hitsura ng ilang nilalaman sa totoong mundo, at ginagamit namin ito dito upang bigyan ang bahagi ng kaunting katawan at laki.
Pumunta sa isang lugar<div class="d-flex position-relative">
<img src="..." class="flex-shrink-0 me-3" alt="...">
<div>
<h5 class="mt-0">Custom component with stretched link</h5>
<p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
<a href="#" class="stretched-link">Go somewhere</a>
</div>
</div>
Mga column na may naka-stretch na link
Isa pang halimbawa ng nilalaman ng placeholder para sa iba pang custom na bahagi na ito. Ito ay nilayon upang gayahin kung ano ang magiging hitsura ng ilang nilalaman sa totoong mundo, at ginagamit namin ito dito upang bigyan ang bahagi ng kaunting katawan at laki.
Pumunta sa isang lugar<div class="row g-0 bg-light position-relative">
<div class="col-md-6 mb-md-0 p-md-4">
<img src="..." class="w-100" alt="...">
</div>
<div class="col-md-6 p-4 ps-md-0">
<h5 class="mt-0">Columns with stretched link</h5>
<p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
<a href="#" class="stretched-link">Go somewhere</a>
</div>
</div>
Pagkilala 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.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched links</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">
<a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
</p>
<p class="card-text bg-light" style="transform: rotate(0);">
This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
</p>
</div>
</div>