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.

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>

Abubuwan kafofin watsa labarai ba su da position: relativeta tsohuwa, don haka muna buƙatar ƙara .position-relativeanan don hana hanyar haɗin gwiwa daga shimfidawa a wajen abin watsa labarai.

Mai jarida tare da shimfidar hanyar haɗi

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Tafi wani wuri

<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>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

ginshiƙai position: relativeta tsohuwa ne, don haka ginshiƙan da za a iya dannawa kawai suna buƙatar .stretched-linkaji akan hanyar haɗin gwiwa. Koyaya, shimfiɗa hanyar haɗi akan gaba ɗaya .rowyana buƙatar .position-staticakan ginshiƙi da .position-relativekan layi.

ginshiƙai tare da shimfidar hanyar haɗi

Tafi wani wuri

<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>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</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>