Isixhumanisi esiluliwe

Yenza noma iyiphi ingxenye ye-HTML noma ingxenye ye-Bootstrap ichofozeke “ngokwelula” isixhumanisi esisidleke nge-CSS.

Engeza .stretched-linkkusixhumanisi ukuze wenze ibhulokhi equkethe ichofozeke nge- ::afterelementi mbumbulu. Ezimweni eziningi, lokhu kusho ukuthi i-elementi enaleyo position: relative;equkethe isixhumanisi .stretched-linknekilasi iyachofozeka.

Amakhadi position: relativengokuzenzakalelayo ane-Bootstrap, ngakho kulokhu ungakwazi ukwengeza .stretched-linkikilasi ngokuphephile kusixhumanisi ekhadini ngaphandle kwanoma yiziphi ezinye izinguquko ze-HTML.

Izixhumanisi eziningi kanye nethagethi yokuthepha akunconywa ngezixhumanisi eziluliwe. Nokho, ezinye positionnezitayela z-indexzingasiza uma lokhu kudingekile.

Ikhadi elinesixhumanisi esiluliwe

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Hamba ndawana thize

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

Izinto zemidiya azinazo position: relativengokuzenzakalela, ngakho-ke sidinga ukungeza .position-relativelapha ukuze sinqande isixhumanisi ukuthi singanwebeki ngaphandle kwento yemidiya.

Imidiya enesixhumanisi esiluliwe

Cras sit amet nibh libero, in gravida nulla. I-Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. I-Fusce condimentum nunc ac nisi vulputate fringilla. I-Donec lacinia congue felis in faucibus.

Hamba ndawana thize

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

Amakholomu position: relativengokuzenzakalela, ngakho amakholomu achofozekayo adinga kuphela .stretched-linkikilasi elikusixhumanisi. Nokho, ukwelula isixhumanisi phezu kwayo yonke .rowkudinga .position-statickukholamu .position-relativenasemgqeni.

Amakholomu anesixhumanisi esiluliwe

Hamba ndawana thize

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

Ukukhomba ibhulokhi equkethe

Uma isixhumanisi esiluliwe singabonakali singasebenzi, ibhulokhi equkethe cishe iyoba imbangela. Izici ezilandelayo ze-CSS zizokwenza ingxenye ibe ibhulokhi eliqukethe:

Inani positionngaphandlestatic
A transformnoma perspectiveinani ngaphandlenone
Inani noma will-change_transformperspective
Inani filterngaphandle nonenoma will-changeinani filter(lisebenza kuphela kuFirefox)

Ikhadi elinezixhumanisi eziluliwe

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Isixhumanisi esiluliwe ngeke sisebenze lapha, ngoba position: relativesengezwe kusixhumanisi

Lesi sixhumanisi esiluliwe sizosatshalaliswa phezu kwe- tag kuphela p, ngoba uguquko lusetshenziswa kuyo.

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