Source

Link egoloddwa

Fuula ekintu kyonna ekya HTML oba ekitundu kya Bootstrap ekiyinza okunyigibwa nga “ogolola” enkolagana eteekeddwa mu kisenge ng’oyita mu CSS.

Okwongera .stretched-linkku link okufuula block yaayo erimu clickable okuyita mu ::afterpseudo element. Ebiseera ebisinga, kino kitegeeza nti elementi position: relative;erimu ekyo ekirimu enkolagana ne .stretched-linkkiraasi esobola okunyigibwa.

Kaadi zirina position: relativeby default mu Bootstrap, kale mu mbeera eno osobola bulungi okwongera .stretched-linkkiraasi ku link mu kaadi awatali nkyukakyuka ndala yonna eya HTML.

Enkolagana eziwera n’ebiruubirirwa by’okukwata tebirina bulungi nga zirina enkolagana ezigoloddwa. Wabula ebimu positionn’emisono z-indexbisobola okuyamba singa kino kiba kyetaagisa.

Kaadi eriko akakwate akagoloddwa

Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.

Genda awalala

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

Ebintu bya media tebirina position: relativeby default, kale twetaaga okwongerako .position-relativewano okuziyiza link okugolola ebweru w'ekintu media.

Emikutu gy'amawulire nga gigoloddwa link

Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque nga esookera ddala okusoba. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa faucibus.

Genda awalala

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

Ennyiriri zibeera position: relativenga zisookerwako, kale ennyiriri eziyinza okunyigibwa zeetaaga .stretched-linkkiraasi yokka ku link. Kyokka, okugolola ekiyungo ku kintu kyonna .rowkyetaagisa .position-staticku mpagi ne .position-relativeku lunyiriri.

Empagi eziriko akakwate akagoloddwa

Genda awalala

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

Okuzuula bulooka erimu

Singa ekiyungo ekigoloddwa tekirabika nga kikola, bulooka erimu osanga y’ejja okuba evuddeko. Ebintu bino wammanga ebya CSS bijja kufuula ekintu ekiziyiza ekirimu:

Omuwendo positionogutali...static
A transformoba perspectiveomuwendo ogutalinone
Omuwendo will-changegwa transformobaperspective
Omuwendo filterogutali noneoba will-changeomuwendo gwa filter(gukola ku Firefox yokka)

Kaadi eriko ebiyungo ebigoloddwa

Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.

Stretched link tegenda kukola wano, kubanga position: relativeeyongerwa ku link

Enkolagana eno egoloddwa ejja kusaasaanyizibwa ku p-tag yokka, kubanga enkyukakyuka ekozesebwa ku yo.

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