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. Sicela uqaphele ukuthi i-CSS positionisebenza kanjani , .stretched-linkayikwazi ukuxutshwa nezinto eziningi zethebula.

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

html

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

Izingxenye eziningi zangokwezifiso azinazo position: relativengokuzenzakalela, ngakho-ke sidinga ukungeza .position-relativelapha ukuze sinqande isixhumanisi ukuthi singanwebeki ngaphandle kwento engumzali.

Ingxenye yangokwezifiso enesixhumanisi esiluliwe

Lokhu okunye okuqukethwe kwesibambi sengxenye yangokwezifiso. Kuhloswe ngayo ukulingisa ukuthi okunye okuqukethwe komhlaba wangempela kungabukeka kanjani, futhi sikusebenzisa lapha ukunikeza ingxenye yomzimba nosayizi omncane.

Hamba ndawana thize

html

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

Amakholomu anesixhumanisi esiluliwe

Esinye isibonelo sokuqukethwe kwesibambi sale enye ingxenye yangokwezifiso. Kuhloswe ngayo ukulingisa ukuthi okunye okuqukethwe komhlaba wangempela kungabukeka kanjani, futhi sikusebenzisa lapha ukunikeza ingxenye yomzimba nosayizi omncane.

Hamba ndawana thize

html

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

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.

html

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