Isixhumanisi esiluliwe
Yenza noma iyiphi ingxenye ye-HTML noma ingxenye ye-Bootstrap ichofozeke “ngokwelula” isixhumanisi esisidleke nge-CSS.
Engeza .stretched-link
kusixhumanisi ukuze wenze ibhulokhi equkethe ichofozeke nge- ::after
elementi mbumbulu. Ezimweni eziningi, lokhu kusho ukuthi i-elementi enaleyo position: relative;
equkethe isixhumanisi .stretched-link
nekilasi iyachofozeka. Sicela uqaphele ukuthi i-CSS position
isebenza kanjani , .stretched-link
ayikwazi ukuxutshwa nezinto eziningi zethebula.
Amakhadi position: relative
ngokuzenzakalelayo ane-Bootstrap, ngakho kulokhu ungakwazi ukwengeza .stretched-link
ikilasi ngokuphephile kusixhumanisi ekhadini ngaphandle kwanoma yiziphi ezinye izinguquko ze-HTML.
Izixhumanisi eziningi kanye nethagethi yokuthepha akunconywa ngezixhumanisi eziluliwe. Nokho, ezinye position
nezitayela z-index
zingasiza uma lokhu kudingekile.
Ikhadi elinesixhumanisi esiluliwe
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Hamba ndawana thize<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>
Izingxenye eziningi zangokwezifiso azinazo position: relative
ngokuzenzakalela, ngakho-ke sidinga ukungeza .position-relative
lapha ukuze sinqande isixhumanisi ukuthi singanwebeki ngaphandle kwesici esingumzali.
Ingxenye yangokwezifiso enesixhumanisi esiluliwe
Lokhu okunye okuqukethwe kwesibambi sengxenye yangokwezifiso. Kuhloswe ngayo ukulingisa ukuthi okunye okuqukethwe komhlaba wangempela kungabukeka kanjani, futhi sikusebenzisa lapha ukunikeza ingxenye yomzimba nosayizi omncane.
Hamba ndawana thize<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>
Amakholomu anesixhumanisi esiluliwe
Esinye isibonelo sokuqukethwe kwesibambi sale enye ingxenye yangokwezifiso. Kuhloswe ngayo ukulingisa ukuthi okunye okuqukethwe komhlaba wangempela kungabukeka kanjani, futhi sikusebenzisa lapha ukunikeza ingxenye yomzimba nosayizi omncane.
Hamba ndawana thize<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>
Ukuhlonza ibhulokhi equkethe
Uma isixhumanisi esiluliwe singabonakali singasebenzi, ibhulokhi equkethe cishe iyoba imbangela. Izici ezilandelayo ze-CSS zizokwenza ingxenye ibe ibhulokhi eliqukethe:
- Inani
position
ngaphandlestatic
- A
transform
nomaperspective
inani ngaphandlenone
- Inani noma
will-change
_transform
perspective
- Inani
filter
ngaphandlenone
nomawill-change
inanifilter
(lisebenza kuphela kuFirefox)
Ikhadi elinezixhumanisi eziluliwe
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isixhumanisi esiluliwe ngeke sisebenze lapha, ngoba position: relative
sengezwe kusixhumanisi
Lesi sixhumanisi esiluliwe sizosatshalaliswa phezu kwe- tag kuphela p
, ngoba uguquko lusetshenziswa kuyo.
<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>