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. Taflatse de dzesii esi wotsɔ alesi CSS positionwɔa dɔe ta la , .stretched-linkmateŋu atsaka kple kplɔ̃dzinu akpa gãtɔ o.

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

Esia nye teƒe aɖewo ƒe nyawo na media nu. Woɖoe be wòasrɔ̃ alesi xexeame ŋutɔŋutɔ me nyatakaka aɖewo anɔ, eye míele ezãm le afisia be míana akpaa ƒe ŋutilã kple lolome vie.

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>This is some placeholder content for the media object. 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>

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

Teƒeɖoɖo ƒe nyawo ƒe kpɔɖeŋu bubu na akpa bubu sia si wowɔ ɖe ɖoɖo nu. Woɖoe be wòasrɔ̃ alesi xexeame ŋutɔŋutɔ me nyatakaka aɖewo anɔ, eye míele ezãm le afisia be míana akpaa ƒe ŋutilã kple lolome vie.

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

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>