Lyen lonje
Fè nenpòt eleman HTML oswa eleman Bootstrap klike sou "etann" yon lyen enbrike atravè CSS.
Ajoute .stretched-link
nan yon lyen pou fè blòk ki genyen li yo klike sou yon ::after
pseudo eleman. Nan pifò ka yo, sa vle di ke yon eleman position: relative;
ki gen yon lyen ak .stretched-link
klas la se klike sou. Tanpri sonje kòman CSS position
travay , .stretched-link
yo pa ka melanje ak pifò eleman tab la.
Kat gen position: relative
pa default nan Bootstrap, kidonk nan ka sa a ou ka san danje ajoute .stretched-link
klas la nan yon lyen nan kat la san okenn lòt chanjman HTML.
Plizyè lyen ak sib tiyo yo pa rekòmande ak lyen lonje. Sepandan, kèk position
ak z-index
estil ka ede ta dwe sa mande.
Kat ak lyen lonje
Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.
Ale yon kote<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>
Objè medya yo pa genyen position: relative
pa default, kidonk nou bezwen ajoute .position-relative
isit la yo anpeche lyen an soti nan etann deyò objè a medya.
Medya ak lyen lonje
Sa a se kèk kontni anplasman pou objè medya a. Li gen entansyon imite sa kèk kontni mond reyèl la ta sanble, epi nou ap itilize li isit la bay eleman nan yon ti jan nan kò ak gwosè.
Ale yon kote<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>
Kolòn yo se position: relative
pa default, kidonk kolòn klike sou sèlman mande pou .stretched-link
klas la sou yon lyen. Sepandan, etann yon lyen sou yon antye .row
mande .position-static
sou kolòn nan ak .position-relative
sou ranje a.
Kolòn ak lyen lonje
Yon lòt egzanp kontni anplasman pou lòt eleman koutim sa a. Li gen entansyon imite sa kèk kontni mond reyèl la ta sanble, epi nou ap itilize li isit la bay eleman nan yon ti jan nan kò ak gwosè.
Ale yon kote<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>
Idantifye blòk ki genyen an
Si lyen an lonje pa sanble yo travay, blòk ki genyen an ap pwobableman se kòz la. Pwopriyete CSS sa yo pral fè yon eleman blòk ki genyen ladan l la:
- Yon
position
valè lòt pasestatic
- A
transform
oswaperspective
valè lòt pasenone
- Yon
will-change
valè detransform
oswaperspective
- Yon
filter
valè ki panone
oswa yonwill-change
valèfilter
(sèlman travay sou Firefox)
Kat ak lyen lonje
Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.
Lyen lonje pa pral travay isit la, paske position: relative
se ajoute nan lyen an
Lyen lonje sa a pral sèlman gaye sou p
-tag la, paske yo aplike yon transfòmasyon sou li.
<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>