Source

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.

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

Cras tshama amet nibh libero, eka gravida nulla. Nulla vel metus scelerisque ya xitsongwatsongwana xa xitombo. Cras purus odio, vestibulum eka vulputate eka, xihlahla xa xirhendzevutani. Fusce condimentum nunc ac nisi xitombo xa xirhendzevutani xa xirhendzevutani. Donec lacinia congue felis eka xitsongwatsongwana xa faucibus.

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

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

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

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>