Ikhonkco eloluliweyo

Yenza nayiphi na into ye-HTML okanye i-Bootstrap icofa ngoku "solula" ikhonkco elifakwe kwi-CSS.

Yongeza .stretched-linkkwikhonkco ukwenza ibhloko equlathe ukucofa ngokusebenzisa into ::afterengeyiyo. Kwiimeko ezininzi, oku kuthetha ukuba into position: relative;enekhonkco .stretched-linkneklasi iyacofa.

Amakhadi ane position: relative-default kwi-Bootstrap, ngoko kulo mzekelo unokongeza ngokukhuselekileyo .stretched-linkiklasi kwikhonkco ekhadini ngaphandle kolunye utshintsho lwe-HTML.

Amakhonkco amaninzi kunye neethagethi zempompo azikhuthazwa ngekhonkco ezoluliweyo. Nangona kunjalo, ezinye positionkunye z-indexnezimbo zinokunceda ukuba oku kuyimfuneko.

Ikhadi elinekhonkco eloluliweyo

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Yiya kwenye indawo

<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 zeMedia azinazo position: relativengokungagqibekanga, ngoko ke kufuneka songeze .position-relativeapha ukunqanda ikhonkco ukuba linganwebeki ngaphandle kwento yemidiya.

Imidiya enekhonkco eloluliweyo

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. I-Donec lacinia congue felis kwi-faucibus.

Yiya kwenye indawo

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

Ikholamu position: relativengokuzenzekelayo, ngoko ke iikholamu ezicofayo zifuna kuphela .stretched-linkiklasi kwikhonkco. Nangona kunjalo, ukolula ikhonkco phezu kwayo yonke .rowkufuna .position-statickwikholamu .position-relativenakumqolo.

Iikholamu ezinekhonkco ezoluliweyo

Yiya kwenye indawo

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

Ukuchonga ibhloko equlathe

Ukuba ikhonkco eloluliweyo alibonakali lisebenza, ibhloko equlathe mhlawumbi iya kuba ngunobangela. Ezi mpawu zilandelayo ze-CSS ziya kwenza isiqalelo ibhloko equlathe:

Ixabiso positionelingelilostatic
A transformokanye perspectiveixabiso ngaphandlenone
Ixabiso okanye will-change_transformperspective
Ixabiso filterngaphandle noneokanye will-changeixabiso filter(lisebenza kuphela kwiFirefox)

Ikhadi elinamakhonkco ezoluliweyo

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Ikhonkco eyoluliweyo ayizukusebenza apha, kuba position: relativeyongezwe kwikhonkco

Olu nxulumaniso olululiweyo luya kusasazwa phezu kwe- ptag, kuba uguqulo lusetyenziswa 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>