Link a wɔatrɛw mu

Ma HTML element anaa Bootstrap component biara a wotumi klik so denam “stretching” nested link via CSS so.

Fa ka .stretched-linklink bi ho na ama ne block a ɛwom no ayɛ nea wotumi klik so denam ::afterpseudo element so. Mpɛn pii no, eyi kyerɛ sɛ element bi position: relative;a ɛwɔ nea ɛwɔ link a ɛne .stretched-linkadesuakuw no wɔ no yɛ nea wotumi klik so. Yɛsrɛ wo hyɛ no nsow sɛ wɔde sɛnea CSS positionyɛ adwuma no ama , .stretched-linkwontumi mfa nfrafra table elements dodow no ara mu.

Kaad ahorow position: relativeno wɔ default wɔ Bootstrap mu, enti wɔ saa tebea yi mu no wubetumi de .stretched-linkadesuakuw no aka link bi a ɛwɔ kaad no mu no ho dwoodwoo a HTML nsakrae foforo biara nni mu.

Wɔnkamfo link ahorow pii ne tap target ahorow nkyerɛ wɔ link ahorow a wɔatrɛw mu. Nanso, ebinom positionne z-indexntadehyɛ betumi aboa sɛ eyi ho hia a.

Kaad a ɛwɔ link a wɔatrɛw mu

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Kɔ baabi

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

Custom components dodow no ara nni position: relativedefault so, enti ɛsɛ sɛ yɛde .position-relativeha no ka ho na amma link no antrɛw wɔ ɔwofo element no akyi.

Custom component a ɛwɔ link a wɔatrɛw mu

Eyi yɛ beae bi a ɛwɔ mu ma amanneɛbɔ fã no. Ɛyɛ nea wɔayɛ sɛ ɛbɛsuasua sɛnea wiase ankasa mu nsɛm bi bɛyɛ, na yɛde redi dwuma wɔ ha de ama ade no nipadua ne ne kɛse kakra.

Kɔ baabi

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

Ntrɛwmu a ɛwɔ link a wɔatrɛw mu

Nhwɛso foforo a ɛfa beae a wɔde nneɛma gu ho ma saa amanne fã foforo yi. Ɛyɛ nea wɔayɛ sɛ ɛbɛsuasua sɛnea wiase ankasa mu nsɛm bi bɛyɛ, na yɛde redi dwuma wɔ ha de ama ade no nipadua ne ne kɛse kakra.

Kɔ baabi

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

Nneɛma a ɛwɔ mu no a wɔbɛkyerɛ

Sɛ ɛte sɛ nea link a wɔatrɛw mu no ntumi nyɛ adwuma a, ebia block a ɛwom no na ɛde ba. CSS agyapadeɛ a ɛdidi soɔ yi bɛma element bi ayɛ block a ɛwɔ mu:

Bo a positionɛsom a ɛnyɛstatic
A transformanaa perspectivebo a ɛsom a ɛnyɛnone
Botae bi will-changea ɛwɔ transformanaaperspective
Botaeɛ filtera ɛnyɛ noneanaa will-changebotaeɛ a ɛwɔ filter(ɛyɛ adwuma wɔ Firefox nko ara so) .

Kaad a ɛwɔ nkitahodi ahorow a wɔatrɛw mu

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Stretched link no rennyɛ adwuma wɔ ha, efisɛ position: relativewɔde aka link no ho

Saa link a wɔatrɛw mu yi bɛtrɛw wɔ p-tag no so nkutoo, efisɛ wɔde nsakrae bi di dwuma wɔ so.

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