Ihuza rirambuye

Kora ikintu icyo ari cyo cyose cya HTML cyangwa Bootstrap ibice ushobora gukanda "kurambura" ihuza ryashyizwe kuri CSS.

Ongeraho .stretched-linkkumurongo kugirango ukore ibiyirimo birimo gukanda ukoresheje ::afterpseudo. Mubihe byinshi, ibi bivuze ko ikintu position: relative;kirimo ibintu bifitanye isano .stretched-linknishuri birashobora gukanda.

Ikarita ifite position: relativeubusanzwe muri Bootstrap, muriki gihe rero urashobora kongeramo umutekano mumurongo .stretched-linkuhuza ikarita nta yandi mahinduka ya HTML.

Imirongo myinshi hamwe nintego zo gukanda ntabwo byemewe hamwe nu murongo urambuye. Ariko, bimwe positionnuburyo z-indexbirashobora gufasha mugihe ibi bisabwa.

Ikarita ifite umurongo urambuye

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Genda ahantu runaka

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

Ibikoresho byitangazamakuru ntabwo bifite byanze position: relativebikunze, dukeneye rero kongeramo .position-relativehano kugirango tubuze guhuza kurambura hanze yikinyamakuru.

Itangazamakuru rifite umurongo urambuye

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

Genda ahantu runaka

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

Inkingi position: relativenibisanzwe, bityo gukanda inkingi bisaba gusa .stretched-linkicyiciro kumurongo. Ariko, kurambura umurongo hejuru yose .rowbisaba .position-statickumurongo no .position-relativekumurongo.

Inkingi zifite umurongo urambuye

Genda ahantu runaka

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

Kumenya ibibujijwe

Niba irambuye rirambuye ridasa nkakazi, ibirimo birimo birashobora kuba impamvu. Imiterere ya CSS ikurikira izakora ikintu kirimo blok:

Agaciro positionuretsestatic
A transformcyangwa perspectiveagaciro uretsenone
will-changeAgaciro ka transformcyangwaperspective
filterAgaciro kitari nonecyangwa will-changeagaciro ka ( filterikora gusa kuri Firefox)

Ikarita ifite imiyoboro irambuye

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Ihuza rirambuye ntirikora hano, kuko position: relativeryongewe kumurongo

Ihuza rirambuye rizakwirakwizwa gusa kuri p-tag, kuko impinduka ikoreshwa kuri yo.

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