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. Palihug timan-i kung giunsa ang CSS positionnagtrabaho , .stretched-linkdili mahimong isagol sa kadaghanan sa mga elemento sa lamesa.

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

Kini mao ang pipila ka placeholder sulod alang sa media butang. Gituyo kini nga sundogon kung unsa ang hitsura sa pipila nga sulud sa tinuud nga kalibutan, ug gigamit namon kini dinhi aron mahatagan ang sangkap sa gamay nga lawas ug gidak-on.

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>This is some placeholder content for the media object. 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>

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

Laing pananglitan sa sulod sa placeholder alang niining laing custom nga component. Gituyo kini nga sundogon kung unsa ang hitsura sa pipila nga sulud sa tinuud nga kalibutan, ug gigamit namon kini dinhi aron mahatagan ang sangkap sa gamay nga lawas ug gidak-on.

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

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>