Source

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.

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

Media fɛnw 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ɔ media object kɔ fɛ.

Media ni stretched link ye

Cras sigilen amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque ye fura ye min bɛ wele ko ante sollicitudin. Cras purus odio, vestibulum min bɛ vulputate kɔnɔ, o ye tempus viverra turpis ye. Fusce condimentum nunc ac nisi jiribolo min bɛ wele ko vulputate fringilla. Donec lacinia congue felis bɛ sɔrɔ faucibus kɔnɔ.

Taga yɔrɔ dɔ la

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

Kolonw bɛ position: relativeKɛ ‘sèn fɛ, o la kulu minnu bɛ Se ka digi, olu bɛ kalasi dɔrɔn de wajibiya .stretched-linkjɛgɛnsira dɔ kan. Nka, ka jɛgɛnsira dɔ Lamaga a bɛɛ kan, .rowo bɛ wajibiya .position-staticKɛ kulu kan ani .position-relativejiribolo kan.

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

Taga yɔrɔ dɔ la

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

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