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

html

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

Custom components akpa gãtɔ mekpɔa position: relativedefault o, eyata ele be míatsɔ .position-relativehere la akpe ɖe eŋu be kadodoa nagakeke ɖe enu le dzila element la godo o.

Custom component kple keke kadodo

Esia nye teƒe aɖewo ƒe emenyawo na akpa 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

html

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

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

html

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

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.

html

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