Hanya mai shimfiɗa
Yi kowane nau'in HTML ko bangaren Bootstrap wanda za'a iya dannawa ta hanyar “miƙewa” hanyar haɗin gwiwa ta hanyar CSS.
Ƙara .stretched-link
zuwa hanyar haɗin yanar gizo don sanya abin da ke ɗauke da shi za'a iya dannawa ta hanyar wani ::after
abu na ƙarya. A mafi yawan lokuta, wannan yana nufin cewa wani abu mai position: relative;
dauke da hanyar haɗi tare da .stretched-link
ajin ana iya dannawa. Lura idan aka ba da yadda CSS position
ke aiki , .stretched-link
ba za a iya haɗe shi da yawancin abubuwan tebur ba.
Katuna suna position: relative
da ta tsohuwa a cikin Bootstrap, don haka a cikin wannan yanayin zaku iya ƙara .stretched-link
aji zuwa hanyar haɗi a cikin katin ba tare da wani canje-canje na HTML ba.
Ba a ba da shawarar hanyoyin haɗi da yawa da maƙasudin famfo tare da shimfidar hanyoyin. Koyaya, wasu position
da z-index
salo na iya taimakawa idan ana buƙatar wannan.
Katin tare da shimfidar hanyar haɗi
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Tafi wani wuri<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>
Yawancin abubuwan al'ada ba su da position: relative
ta tsohuwa, don haka muna buƙatar ƙara .position-relative
anan don hana hanyar haɗin gwiwa daga shimfidawa a wajen ɓangaren iyaye.
Bangaren al'ada tare da shimfidar hanyar haɗi
Wannan wasu abun ciki ne mai riƙe da wuri don ɓangaren al'ada. An yi niyya don kwaikwayi yadda wasu abubuwan da ke cikin duniyar zahiri za su yi kama, kuma muna amfani da shi a nan don ba sashin ɗan ƙaramin jiki da girma.
Tafi wani wuri<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>
ginshiƙai tare da shimfidar hanyar haɗi
Wani misali na abun ciki mai riƙewa don wannan sauran abubuwan al'ada. An yi niyya don kwaikwayi yadda wasu abubuwan da ke cikin duniyar zahiri za su yi kama, kuma muna amfani da shi a nan don ba sashin ɗan ƙaramin jiki da girma.
Tafi wani wuri<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>
Gano block ɗin da ke ɗauke da shi
Idan hanyar haɗin da aka shimfiɗa ba ta yi aiki ba, toshe mai ƙunshe zai iya zama sanadin. Kaddarorin CSS masu zuwa za su sanya kashi ya zama toshe mai ƙunshe:
- Wani
position
darajar bandastatic
- A
transform
koperspective
darajar waninnone
- Ƙimar ko
will-change
_transform
perspective
- Ƙimar
filter
waninnone
kowill-change
ƙimarfilter
(yana aiki akan Firefox kawai)
Katin tare da shimfidar hanyoyin haɗin gwiwa
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Hanyar da aka shimfiɗa ba za ta yi aiki a nan ba, saboda position: relative
an ƙara zuwa hanyar haɗin
Wannan hanyar haɗin da aka shimfiɗa za a baje shi kawai a kan p
-tag, saboda ana amfani da canji zuwa gare shi.
<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>