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 paglihok ang CSSposition , .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.

Adto sa usa ka dapit

html

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

Kadaghanan sa naandan nga mga sangkap wala position: relativepinaagi sa default, busa kinahanglan namon nga idugang ang .position-relativedinhi aron mapugngan ang link gikan sa pag-uswag sa gawas sa elemento sa ginikanan.

Pasadya nga sangkap nga adunay gituy-od nga link

Kini ang pipila ka sulud sa placeholder alang sa naandan nga sangkap. 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.

Adto sa usa ka dapit

html

<div class="d-flex position-relative">
  <img src="..." class="flex-shrink-0 me-3" alt="...">
  <div>
    <h5 class="mt-0">Custom component with stretched link</h5>
    <p>This is some placeholder content for the 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>

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.

Adto sa usa ka dapit

html

<div class="row g-0 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 p-4 ps-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 gituy-od nga link 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.

html

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