Source

Nayunnat a silpo

Pagbalinen ti aniaman nga elemento ti HTML wenno paset ti Bootstrap a mai-click babaen ti “panangyunnat” iti naisanglad a silpo babaen ti CSS.

Inayon .stretched-linkiti maysa a silpo tapno agbalin a mai-click ti naglaon a blokena babaen ti ::afterpseudo nga elemento. Iti kaaduan a kaso, daytoy ket kayatna a sawen a ti maysa nga elemento nga addaan iti position: relative;dayta a naglaon ti silpo iti .stretched-linkklase ket mabalin a mai-klik.

Dagiti kard ket addaan position: relativebabaen ti default iti Bootstrap, isu nga iti daytoy a kaso ket mabalinmo a sitatalged nga inayon ti .stretched-linkklase iti maysa a silpo iti kard nga awan ti ania man a sabali a panagbalbaliw ti HTML.

Saan a mairekomendar ti adu a silpo ken puntiria ti tap kadagiti nayunnat a silpo. Nupay kasta, makatulong ti dadduma positionken z-indexestilo no kasapulan daytoy.

Kard nga addaan iti nayunnat a link

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Mapanka iti sadinoman

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

Dagiti banag ti media ket awan position: relativeti default, isu a kasapulantayo nga inayon ti .position-relativeditoy tapno malapdan ti silpo manipud iti panagunat iti ruar ti banag ti media.

Media nga addaan iti nayunnat a link

Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.

Mapanka iti sadinoman

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

Dagiti adigi ket position: relativebabaen ti default, isu a dagiti mai-klik a kolum ket agkasapulan laeng ti .stretched-linkklase iti maysa a silpo. Nupay kasta, ti panangyunnat iti maysa a silpo iti intero .rowket agkasapulan .position-staticiti adigi ken .position-relativeiti hilera.

Dagiti adigi nga addaan iti nayunnat a silpo

Mapanka iti sadinoman

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

Panangilasin ti naglaon a bloke

No kasla saan nga agtrabaho ti nayunnat a silpo, ti naglaon a bloke ti nalabit pakaigapuan. Dagiti sumaganad a tagikua ti CSS ket mangaramidto ti maysa nga elemento a ti naglaon a bloke:

Maysa a positionpateg malaksid itistatic
A transformwenno perspectivepateg malaksid itinone
Maysa a will-changepateg ti transformwennoperspective
Ti filterpateg malaksid nonewenno ti will-changepateg ti filter(agtrabaho laeng iti Firefox) .

Kard nga addaan kadagiti nayunnat a silpo

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ti nayunnat a silpo ket saan nga agtrabaho ditoy, gapu position: relativeta nainayon iti silpo

Daytoy a nayunnat a silpo ket maiwaras laeng iti rabaw ti p-tag, gapu ta ti maysa a panagbalbaliw ket maipakat iti daytoy.

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