Xihlanganisi lexi andlariweke

Endla leswaku xiphemu xihi na xihi xa HTML kumbe xiphemu xa Bootstrap xi tsindziyela hi ku “stretching” xihlanganisi lexi pfanganisiweke hi ku tirhisa CSS.

Engetela .stretched-linkeka xihlanganisi ku endla leswaku xibokisana xa yona lexi nga na xona xi clickable hi ku tirhisa ::afterelemente ya vuxisi. Hi xitalo, leswi swi vula leswaku elemente leyi nga na position: relative;leyi nga na xihlanganisi na .stretched-linktlilasi yi nga tsindziyela. Hi kombela u xiya given how CSS positionworks , .stretched-linka yi nge hlanganisiwi na swiaki swo tala swa tafula.

Makhadi ya na position: relativehi ku tiyimisela eka Bootstrap, kutani eka xiyimo lexi u nga engetela .stretched-linktlilasi hi ku hlayiseka eka xihlanganisi eka khadi handle ka ku cinca kun’wana ka HTML.

Swihlanganisi swo tala na swikongomelo swa ku khoma a swi bumabumeriwi hi swihlanganisi leswi andlariweke. Hambiswiritano, swin’wana positionni z-indexswitayele swi nga pfuna loko leswi swi laveka.

Khadi leri nga ni xihlanganisi lexi andlariweke

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Yana kun’wana

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

Swilo swa midiya a swi na swona position: relativehi ku tiyimisela, kutani hi fanele ku engetela .position-relativelaha ku sivela xihlanganisi ku ololoka ehandle ka nchumu wa midiya.

Media leyi nga na link leyi andlariweke

Lexi i nhundzu yin’wana ya xikhomela-ndhawu xa nchumu wa midiya. Yi endleriwe ku tekelela leswi swilo swin’wana swa misava ya xiviri swi nga langutekaka xiswona, naswona hi swi tirhisa laha ku nyika xiphemu lexi xiphemu xa miri ni vukulu.

Yana kun’wana

<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>This is some placeholder content for the media object. 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>

Tikholomu position: relativehi ku tiyimisela, hikwalaho tikholomu leti nga tsindziyelaka ti lava ntsena .stretched-linktlilasi eka xihlanganisi. Hambiswiritano, ku andlala xihlanganisi ehenhla ka hinkwaswo .rowswi lava .position-staticeka kholomo ni .position-relativele ka layini.

Tikholomu leti nga ni xihlanganisi lexi andlariweke

Xikombiso xin’wana xa nhundzu ya xikhomela-ndhawu xa xiphemu lexi xin’wana xa ntolovelo. Yi endleriwe ku tekelela leswi swilo swin’wana swa misava ya xiviri swi nga langutekaka xiswona, naswona hi swi tirhisa laha ku nyika xiphemu lexi xiphemu xa miri ni vukulu.

Yana kun’wana

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

Ku kuma xibokisana lexi nga na xona

Loko xihlanganisi lexi andlariweke xi vonaka xi nga tirhi, xibokisana lexi nga na xona kumbexana xi ta va xivangelo. Swihlawulekisi swa CSS leswi landzelaka swi ta endla leswaku elemente yi va xibokisana lexi nga na swona:

Nkoka positionwun’wana handle kastatic
A transformkumbe perspectivenkoka wun’wana handle kanone
Nkoka will-changewa transformkumbeperspective
Nhlayo filteryin’wana handle ka nonekumbe will-changentikelo wa filter(wu tirha ntsena eka Firefox) .

Khadi leri nga ni swihlanganisi leswi andlariweke

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Stretched link a yi nge tirhi laha, hikuva position: relativeyi engeteriwile eka link

Xihlanganisi lexi lexi andlariweke xi ta hangalasiwa ntsena ehenhla ka p-tag, hikuva ku tirhisiwa ku hundzuka eka xona.

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