Yakatambanudzwa link
Ita chero chinhu cheHTML kana Bootstrap chikamu chinodzvanywa ne "kutambanudza" chinongedzo nested kuburikidza neCSS.
Wedzera .stretched-link
kune chinongedzo kuti iite iyo ine block inodzvanywa kuburikidza nechinhu ::after
chepseudo. Kazhinji, izvi zvinoreva kuti chinhu position: relative;
chine chinongedzo .stretched-link
nekirasi chinodzvanywa. Ndokumbira utarise kuti CSS position
inoshanda sei , .stretched-link
haigone kusanganiswa nezvakawanda zvetafura.
Makadhi ane position: relative
nekusarudzika muBootstrap, saka mune iyi kesi unogona kuwedzera zvakachengeteka .stretched-link
kirasi kune chinongedzo mune kadhi pasina imwe shanduko yeHTML.
Multiple links uye tap tap haikurudzirwe ine yakatambanudzwa link. Nekudaro, mamwe position
uye z-index
masitayera anogona kubatsira kana izvi zvichidikanwa.
Kadhi ine yakatambanudzwa link
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Enda kune imwe nzvimbo<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>
Zvizhinji zvetsika zvinhu hazvina position: relative
nekukasira, saka isu tinofanirwa kuwedzera .position-relative
pano kudzivirira chinongedzo kubva kutambanudza kunze kwechinhu chemubereki.
Custom component ine stretched link
Izvi ndezvimwe zvechibatiso chenzvimbo yechikamu chetsika. Izvo zvakaitirwa kutevedzera izvo zvimwe zvepasirese zvemukati zvingataridzika, uye isu tiri kuishandisa pano kupa chikamu chikamu chemuviri uye saizi.
Enda kune imwe nzvimbo<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>
Makoramu ane chinongedzo chakatambanudzwa
Mumwe muenzaniso wenzvimbo yezvinyorwa zvechimwe chikamu chetsika. Izvo zvakaitirwa kutevedzera izvo zvimwe zvepasirese zvemukati zvingataridzika, uye isu tiri kuishandisa pano kupa chikamu chikamu chemuviri uye saizi.
Enda kune imwe nzvimbo<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>
Kuziva iyo ine block
Kana iyo yakatambanudzwa link ichiita senge isingashande, iyo ine block ingangove iri chikonzero. Iyo inotevera CSS zvivakwa ichaita chinhu icho chine block:
- A
position
value kunzestatic
- A
transform
kanaperspective
kukosha kunze kwenone
- A
will-change
value oftransform
orperspective
- Kukosha
filter
kumwe kunzenone
kanawill-change
kukosha kwefilter
(inoshanda chete paFirefox)
Kadhi ine akatambanudzwa links
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Yakatambanudzwa link haishande pano, nekuti position: relative
inowedzerwa kune iyi link
Ichi chinongedzo chakatambanudzwa chinongopararira pamusoro pe- p
tag, nekuti shanduko inoshandiswa pairi.
<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>