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.

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>

Media nneɛma nni position: relativedefault so, enti ɛsɛ sɛ yɛde .position-relativeha no ka ho na amma link no antrɛw wɔ media ade no akyi.

Media a ɛwɔ link a wɔatrɛw mu

Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.

Kɔ baabi

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

Columns no yɛ position: relativedefault, enti columns a wotumi klik so no hwehwɛ sɛ .stretched-linkclass no wɔ link bi so nkutoo. Nanso, sɛ wobɛtrɛw link bi so wɔ ne nyinaa so a, .rowɛhwehwɛ sɛ wode .position-staticsi adum no .position-relativeso ne row no so.

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

Kɔ baabi

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

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>