Xihlanganisi lexi andlariweke
Endla leswaku xiphemu xihi na xihi xa HTML kumbe xiphemu xa Bootstrap xi tsindziyela hi ku “stretching” xihlanganisi lexi pfanganisiweke hi ku tirhisa CSS.
Engetela .stretched-link
eka xihlanganisi ku endla leswaku xibokisana xa yona lexi nga na xona xi clickable hi ku tirhisa ::after
elemente ya vuxisi. Hi xitalo, leswi swi vula leswaku elemente leyi nga na position: relative;
leyi nga na xihlanganisi na .stretched-link
tlilasi yi nga tsindziyela. Hi kombela u xiya given how CSS position
works , .stretched-link
a yi nge hlanganisiwi na swiaki swo tala swa tafula.
Makhadi ya na position: relative
hi ku tiyimisela eka Bootstrap, kutani eka xiyimo lexi u nga engetela .stretched-link
tlilasi hi ku hlayiseka eka xihlanganisi eka khadi handle ka ku cinca kun’wana ka HTML.
Swihlanganisi swo tala na swikongomelo swa ku khoma a swi bumabumeriwi hi swihlanganisi leswi andlariweke. Hambiswiritano, swin’wana position
ni z-index
switayele swi nga pfuna loko leswi swi laveka.
Khadi leri nga ni xihlanganisi lexi andlariweke
Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.
Yana kun’wana<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>
Swilo swa midiya a swi na swona position: relative
hi ku tiyimisela, kutani hi fanele ku engetela .position-relative
laha ku sivela xihlanganisi ku ololoka ehandle ka nchumu wa midiya.
Media leyi nga na link leyi andlariweke
Lexi i nhundzu yin’wana ya xikhomela-ndhawu xa nchumu wa midiya. Yi endleriwe ku tekelela leswi swilo swin’wana swa misava ya xiviri swi nga langutekaka xiswona, naswona hi swi tirhisa laha ku nyika xiphemu lexi xiphemu xa miri ni vukulu.
Yana kun’wana<div class="media position-relative">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media with stretched link</h5>
<p>This is some placeholder content for the media object. 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>
Tikholomu position: relative
hi ku tiyimisela, hikwalaho tikholomu leti nga tsindziyelaka ti lava ntsena .stretched-link
tlilasi eka xihlanganisi. Hambiswiritano, ku andlala xihlanganisi ehenhla ka hinkwaswo .row
swi lava .position-static
eka kholomo ni .position-relative
le ka layini.
Tikholomu leti nga ni xihlanganisi lexi andlariweke
Xikombiso xin’wana xa nhundzu ya xikhomela-ndhawu xa xiphemu lexi xin’wana xa ntolovelo. Yi endleriwe ku tekelela leswi swilo swin’wana swa misava ya xiviri swi nga langutekaka xiswona, naswona hi swi tirhisa laha ku nyika xiphemu lexi xiphemu xa miri ni vukulu.
Yana kun’wana<div class="row no-gutters 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 position-static p-4 pl-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>
Ku kuma xibokisana lexi nga na xona
Loko xihlanganisi lexi andlariweke xi vonaka xi nga tirhi, xibokisana lexi nga na xona kumbexana xi ta va xivangelo. Swihlawulekisi swa CSS leswi landzelaka swi ta endla leswaku elemente yi va xibokisana lexi nga na swona:
- Nkoka
position
wun’wana handle kastatic
- A
transform
kumbeperspective
nkoka wun’wana handle kanone
- Nkoka
will-change
watransform
kumbeperspective
- Nhlayo
filter
yin’wana handle kanone
kumbewill-change
ntikelo wafilter
(wu tirha ntsena eka Firefox) .
Khadi leri nga ni swihlanganisi leswi andlariweke
Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.
Stretched link a yi nge tirhi laha, hikuva position: relative
yi engeteriwile eka link
Xihlanganisi lexi lexi andlariweke xi ta hangalasiwa ntsena ehenhla ka p
-tag, hikuva ku tirhisiwa ku hundzuka eka xona.
<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>