Kadodo si keke ɖe enu

Na HTML ƒe akpa ɖesiaɖe alo Bootstrap ƒe akpa ɖesiaɖe nate ŋu azi edzi to “keke” kadodo si wotsɔ ƒo ƒui to CSS dzi me.

Tsɔ kpe .stretched-linkɖe kadodo aɖe ŋu be wòana eƒe akpa si le eme la nate ŋu akli to ::afteralakpanu aɖe dzi. Zi geɖe la, esia fia be woate ŋu azi element aɖe position: relative;si me esi me kadodo le kple .stretched-linkklass la le.

Kpekpeɖeŋugbalẽviwo position: relativele gɔmedzedzea me le Bootstrap me, eyata le go sia me la, àteŋu atsɔ .stretched-linkklass la akpe ɖe kadodo aɖe ŋu le kaɖia me dedie HTML ƒe tɔtrɔ bubu aɖeke manɔmee.

Womekafu kadodo geɖe kple taƒoƒo ƒe taɖodzinuwo kple kadodo siwo keke ta o. Gake ɖewo positionkple z-indexatsyãwo ate ŋu akpe ɖe ame ŋu nenye be esia bia.

Kpekpeɖeŋugbalẽvi si me wokeke kadodoa le

Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.

Yi afi aɖe

<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>

Media nuawo mele position: relativegɔmedzedzea me o, eyata ele be míatsɔ .position-relativeafisia akpe ɖe eŋu be kadodoa nagakeke le media nu la godo o.

Media kple kadodo si keke

Cras nɔ anyi amet nibh libero, le gravida nulla me. Nulla vel metus scelerisque si wowɔna do ŋgɔ na ʋɔnudɔdrɔ̃. Cras purus odio, vestibulum le akɔta le, tempus viverra turpis. Fusce condimentum nunc ac nisi ƒe ƒunukpeƒe ƒe lãkusi. Donec lacinia congue felis le lãgbalẽgolo me.

Yi afi aɖe

<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>

Sɔtiwo le position: relativegɔmedzedzea me, eyata sɔti siwo dzi woate ŋu azi ɖo la bia .stretched-linkklass la le kadodo aɖe dzi ko. Gake kadodo aɖe keke ɖe nu blibo aɖe dzi .rowbia be .position-staticwoanɔ sɔti la kple .position-relativefli la dzi.

Sɔti siwo ŋu wokeke kadodo le

Yi afi aɖe

<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>

De dzesi block si le eme

Ne edze abe kadodo si keke la mewɔa dɔ o ene la, anɔ eme be block si le eme lae anye nusi gbɔ wòtso. CSS ƒe nɔnɔme siwo gbɔna la ana element aɖe nanye block si me le:

Asixɔxɔ positionbubu si menyestatic
A transformalo perspectiveasixɔxɔ bubu si menyenone
will-changeAsixɔxɔ aɖe si le transformalo ŋuperspective
Asixɔxɔ filterbubu si menye nonealo will-changeasixɔxɔ si le filter(Firefox dzi koe wòwɔa dɔ le) .

Kpekpeɖeŋugbalẽvi si dzi wokeke kadodowo le

Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.

Stretched link mawɔ dɔ le afisia o, elabena position: relativewotsɔe kpe ɖe kadodoa ŋu

-tag la dzi koe woakaka kadodo sia si keke la p, elabena wowɔa tɔtrɔ ɖe eŋu.

<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>