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 ::afterpseudo elementu. In a maiò parte di i casi, questu significa chì un elementu cù position: relative;chì cuntene un ligame cù a .stretched-linkclassa 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: relativeper difettu in Bootstrap, cusì in questu casu pudete aghjunghje in modu sicuru a .stretched-linkclassa à 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 positionstili z-indexponu aiutà si deve esse necessariu.

Carta cù ligame allungatu

Qualchì testu d'esempiu rapidu per custruisce nantu à u titulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Andate in qualchì locu

html

<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: relativeper difettu, cusì avemu bisognu di aghjunghje .position-relativequì 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

html

<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

html

<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 positionvalore altru ch'èstatic
A transformo perspectivevalore altru chènone
Un will-changevalore di transformoperspective
Un filtervalore altru noneo un will-changevalore di filter(funziona solu in Firefox)

Carta cù ligami allungati

Qualchì testu d'esempiu rapidu per custruisce nantu à u titulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

U ligame allungatu ùn funziona micca quì, perchè position: relativehè aghjuntu à u ligame

Stu ligame allungatu serà spargugliatu solu nantu à u p-tag, perchè una trasfurmazioni hè appiicata à questu.

html

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