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. Nsaba omanye given how CSS positionworks , .stretched-linktesobola kutabulwa na bintu bya mmeeza ebisinga obungi.

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>

Ebitundu ebisinga ebya custom tebirina position: relativeby default, kale twetaaga okugattako .position-relativewano okuziyiza link okugolola ebweru w'ekintu ekizadde.

Ekitundu eky'ennono nga kiriko enkolagana egoloddwa

Kino kye kimu ku birimu ekifo eky'ekitundu eky'ennono. Kigendereddwamu okukoppa ebimu ku birimu eby’ensi entuufu bwe byandifaanana, era tubikozesa wano okuwa ekitundu ekyo akatono ak’omubiri n’obunene.

Genda awalala

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

Empagi eziriko akakwate akagoloddwa

Ekyokulabirako ekirala eky'ebirimu ekifo eky'ekitundu kino ekirala eky'ennono. Kigendereddwamu okukoppa ebimu ku birimu eby’ensi entuufu bwe byandifaanana, era tubikozesa wano okuwa ekitundu ekyo akatono ak’omubiri n’obunene.

Genda awalala

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

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>