Source

Gi-inat nga link

Himoa ang bisan unsang HTML nga elemento o Bootstrap component nga ma-click pinaagi sa "pag-inat" sa usa ka nested link pinaagi sa CSS.

Idugang .stretched-linksa usa ka link aron mahimo nga ma-click ang adunay sulod nga block pinaagi sa usa ka ::afterpseudo nga elemento. Sa kadaghanan nga mga kaso, kini nagpasabut nga ang usa ka elemento position: relative;nga adunay sulud nga usa ka link sa .stretched-linkklase mahimong ma-click.

Ang mga kard adunay position: relativedefault sa Bootstrap, mao nga sa kini nga kaso mahimo nimong luwas nga idugang ang .stretched-linkklase sa usa ka link sa kard nga wala’y ubang mga pagbag-o sa HTML.

Ang daghang mga link ug mga target sa pag-tap dili girekomenda nga adunay mga gituy-od nga mga link. Bisan pa, ang pipila positionug z-indexmga istilo makatabang kung kinahanglan kini.

Kard nga adunay gituy-od nga link

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Lakaw sa usa ka dapit

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

Ang mga butang sa media wala position: relativepinaagi sa default, mao nga kinahanglan namon nga idugang ang .position-relativedinhi aron mapugngan ang link gikan sa pag-inat sa gawas sa butang sa media.

Media nga adunay gituy-od nga link

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.

Lakaw sa usa ka dapit

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

Ang mga kolum position: relativepinaagi sa default, mao nga ang ma-click nga mga kolum nagkinahanglan lamang sa .stretched-linkklase sa usa ka link. Bisan pa, ang pag-inat sa usa ka link sa usa ka tibuuk .rownanginahanglan .position-staticsa kolum ug .position-relativesa laray.

Mga kolum nga may gituy-od nga sumpay

Lakaw sa usa ka dapit

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

Pag-ila sa adunay sulod nga bloke

Kung ang gibuklad nga sumpay ingon og dili molihok, ang adunay sulud nga bloke tingali ang hinungdan. Ang mosunud nga mga kabtangan sa CSS maghimo usa ka elemento nga adunay sulud nga bloke:

Usa ka positionbili gawas sastatic
A transformo perspectivebili gawas sanone
Usa ka will-changebili sa transformoperspective
Usa ka filterbili gawas sa noneo usa ka will-changebili sa filter(nagtrabaho lamang sa Firefox)

Kard nga adunay mga gibuklad nga mga link

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ang gituy-od nga link dili molihok dinhi, tungod position: relativekay gidugang sa link

Kini nga gituy-od nga link ipakaylap lamang sa p-tag, tungod kay ang usa ka pagbag-o gipadapat niini.

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