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.

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

L'uggetti media ùn anu micca position: relativeper difettu, cusì avemu bisognu di aghjunghje .position-relativequì per impediscenu chì u ligame si stende fora di l'ughjettu media.

Media cù ligame allungatu

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.

Andate in qualchì locu

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

I culonni sò position: relativein modu predeterminatu, cusì e culonne clicchevuli necessitanu solu a .stretched-linkclassa nantu à un ligame. In ogni casu, stende un ligame nantu à un sanu .rowesige .position-staticnantu à a colonna è .position-relativein a fila.

Culonni cù ligame allungatu

Andate in qualchì locu

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

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 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: relativehè 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>