Ligame allungatu
Fate cliccà qualsiasi elementu HTML o cumpunente Bootstrap "stendendu" un ligame nidificatu via CSS.
Aghjunghjite .stretched-link
à un ligame per fà cliccà u so bloccu chì cuntene via un ::after
pseudo elementu. In a maiò parte di i casi, questu significa chì un elementu cù position: relative;
chì cuntene un ligame cù a .stretched-link
classa hè clicable. Per piacè nutate, datu cumu funziona CSSposition
, .stretched-link
ùn pò micca esse mischju cù a maiò parte di l'elementi di a tabella.
I carte sò position: relative
per difettu in Bootstrap, cusì in questu casu pudete aghjunghje in modu sicuru a .stretched-link
classa à un ligame in a carta senza alcunu altri cambiamenti HTML.
I ligami multipli è i tappi target ùn sò micca cunsigliatu cù ligami allungati. Tuttavia, certi position
stili z-index
ponu aiutà si deve esse necessariu.
Carta cù ligame allungatu
Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.
Andate in qualchì locu<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>
A maiò parte di i cumpunenti persunalizati ùn anu micca position: relative
per difettu, cusì avemu bisognu di aghjunghje .position-relative
quì per impedisce chì u ligame si stende fora di l'elementu parent.
Cumpunente persunalizatu cù ligame allungatu
Questu hè un cuntenutu di placeholder per u cumpunente persunalizatu. Hè destinatu à imità ciò chì parerebbe un cuntenutu reale, è l'avemu aduprà quì per dà à u cumpunente un pocu di corpu è dimensione.
Andate in qualchì locu<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>
Culonni cù ligame allungatu
Un altru esempiu di cuntenutu di placeholder per questu altru cumpunente persunalizatu. Hè destinatu à imità ciò chì parerebbe un cuntenutu reale, è l'avemu aduprà quì per dà à u cumpunente un pocu di corpu è dimensione.
Andate in qualchì locu<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>
Identificà u bloccu chì cuntene
Se u ligame allungatu ùn pare micca travaglià, u bloccu chì cuntene probabilmente serà a causa. E seguenti proprietà CSS facenu un elementu u bloccu chì cuntene:
- Un
position
valore altru ch'èstatic
- A
transform
operspective
valore altru chènone
- Un
will-change
valore ditransform
operspective
- Un
filter
valore altrunone
o unwill-change
valore difilter
(funziona solu in Firefox)
Carta cù ligami allungati
Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.
U ligame allungatu ùn funziona micca quì, perchè position: relative
hè aghjuntu à u ligame
Stu ligame allungatu serà spargugliatu solu nantu à u p
-tag, perchè una trasfurmazioni hè appiicata à questu.
<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>