Lien stretché

Aw bɛ HTML yɔrɔ walima Bootstrap yɔrɔ o yɔrɔ kɛ fɛn ye min bɛ se ka digi ni “stretching” ye nested link (yɔrɔ) dɔ la CSS fɛ.

A bɛ Fàra .stretched-link'jyɛn-yɔrɔ dɔ kan walasa k'a kɔnɔfɛnw bloki Kɛ fɛn ye min bɛ Se ka digi ::afterpseudo element fɛ. A ka c’a la, o kɔrɔ ye ko fɛn min bɛ ni position: relative;min bɛ ni jὲɲɔgɔnya ye ni .stretched-linkkalasi ye, o bɛ Se ka digi. Aw k’a kɔlɔsi ni CSS positionbɛ baara kɛ cogo min na , .stretched-linka tɛ se ka ɲagami ni tabali yɔrɔ fanba ye.

Kartiw position: relativebɛ Bootstrap kɔnɔ ka daminɛ, o la nin ko in na i bɛ se ka .stretched-linkkalasi fara ɲɔgɔn kan lafiya la karti kɔnɔ k’a sɔrɔ HTML caman ma Changé.

Jɛɲɔgɔnya caman ani tap targets tɛ ladilikan sɔrɔ ni jɛgɛnsira sɔgɔlenw ye. Nka, dɔw positionni z-indexcogoyaw bɛ se ka dɛmɛ ni o kɛra wajibi ye.

Karti ni lien stretché

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Taga yɔrɔ dɔ la

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

Laada-yɔrɔ fanba tɛ position: relativeni default ye, o la an ka kan ka .position-relativeyan Fàra a kan walasa ka jὲɲɔgɔnya bali ka 'sèn Bɔ bangebaga-yɔrɔ kɔkan.

Component personnalisé ni lien stretché

Nin ye yɔrɔ-yɔrɔ-ko dɔw ye ladamu-yɔrɔ la. A laɲini ye ka diɲɛ kɔnɔko lakika dɔw bɛna kɛ cogo min na, o ladege, wa an bɛ baara kɛ n’a ye yan walasa ka yɔrɔ in farikolo ni bonya dɔɔnin di a ma.

Taga yɔrɔ dɔ la

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

Kolonw ni jɛgɛnsira sɔgɔlen

Yɔrɔ-yɔrɔ kɔnɔkow misali wɛrɛ nin ladamu-yɔrɔ wɛrɛ in na. A laɲini ye ka diɲɛ kɔnɔko lakika dɔw bɛna kɛ cogo min na, o ladege, wa an bɛ baara kɛ n’a ye yan walasa ka yɔrɔ in farikolo ni bonya dɔɔnin di a ma.

Taga yɔrɔ dɔ la

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

Bloki min bɛ a kɔnɔ, o dɔnni

Ni a bɛ i n’a fɔ jɛgɛnsira min bɛ jɛgɛn, o tɛ baara kɛ, n’a sɔrɔla bloki min bɛ a kɔnɔ, o de bɛna kɛ sababu ye. Nin CSS nafolomafɛnw bɛna kɛ sababu ye ka fɛn dɔ kɛ bloki kɔnɔfɛnw ye:

Nafa positionwɛrɛ min tɛstatic
A transformwalima perspectivenafa wɛrɛ min tɛnone
A will-changenafa ka bon transformwalimaperspective
Nafa filterwɛrɛ min tɛ nonewalima will-changenafa min ye filter(a bɛ baara kɛ Firefox dɔrɔn de kan)

Karti min bɛ ni jɛgɛnsira sɔgɔlenw ye

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Stretched link tɛna baara kɛ yan, bawo position: relativea bɛ fara link kan

O jɛgɛnsira in bɛna jɛnsɛn dɔrɔn p-tag kan, bawo fɛn caman tigɛli bɛ kɛ a kan.

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