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-linkzuwa hanyar haɗin yanar gizo don sanya abin da ke ɗauke da shi za'a iya dannawa ta hanyar wani ::afterabu na ƙarya. A mafi yawan lokuta, wannan yana nufin cewa wani abu mai position: relative;dauke da hanyar haɗi tare da .stretched-linkajin ana iya dannawa. Lura idan aka ba da yadda CSS positionke aiki , .stretched-linkba za a iya haɗe shi da yawancin abubuwan tebur ba.

Katuna suna position: relativeda ta tsohuwa a cikin Bootstrap, don haka a cikin wannan yanayin zaku iya ƙara .stretched-linkaji 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 positionda z-indexsalo 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: relativeta tsohuwa, don haka muna buƙatar ƙara .position-relativeanan 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 positiondarajar bandastatic
A transformko perspectivedarajar waninnone
Ƙimar ko will-change_transformperspective
Ƙimar filterwanin noneko will-changeƙimar filter(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: relativean ƙ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>