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-link
link bi ho na ama ne block a ɛwom no ayɛ nea wotumi klik so denam ::after
pseudo element so. Mpɛn pii no, eyi kyerɛ sɛ element bi position: relative;
a ɛwɔ nea ɛwɔ link a ɛne .stretched-link
adesuakuw no wɔ no yɛ nea wotumi klik so.
Kaad wɔ position: relative
default wɔ Bootstrap mu, enti wɔ saa tebea yi mu no wubetumi de .stretched-link
adesuakuw 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 position
ne z-index
ntadehyɛ 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: relative
default so, enti ɛsɛ sɛ yɛde .position-relative
ha 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: relative
default, enti columns a wotumi klik so no hwehwɛ sɛ .stretched-link
class no wɔ link bi so nkutoo. Nanso, sɛ wobɛtrɛw link bi so wɔ ne nyinaa so a, .row
ɛhwehwɛ sɛ wode .position-static
si adum no .position-relative
so ne row no so.
Ntrɛwmu 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="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
transform
anaaperspective
bo a ɛsom a ɛnyɛnone
- Botae bi
will-change
a ɛwɔtransform
anaaperspective
- Botaeɛ
filter
a ɛnyɛnone
anaawill-change
botaeɛ 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: relative
wɔ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>