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 wɔ position: relativedefault 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

Eyi yɛ beae bi a ɛwɔ mu ma media ade 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="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>

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

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

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>