Nexus extentus

Fac quodlibet elementum HTML vel Bootstrap componente clickable per "extendere" nexum nestum per CSS.

Addere .stretched-linkad nexum ut suum claudat strepitabile per ::afterpseudo elementum. Pleraque hoc significat elementum cum position: relative;eo quod nexum cum .stretched-linkgenere strepitabile continet.

Chartas per defaltam in Bootstrap habent, ut hoc in casu classem ad nexum in charta sine HTML mutationibus aliis position: relativeaddere tuto possis ..stretched-link

Plures nexus et scuta sonum non commendantur cum nexibus extentis. Sed nonnulla positionet z-indexgenera iuvare possunt si hoc requiri.

Card cum extenta link

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Ite somewhere

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

Res media per defaltam non habent position: relative, ideo hic addere oportet .position-relativene nexum extra medium objectum tendat.

Media cum extenta link

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.

Ite somewhere

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

Columnae per defaltam sunt, ideo columnae clickable tantum in nexu classium position: relativerequirunt . .stretched-linkSed nexum tendens supra totum .rowrequirit .position-staticin columna et .position-relativein ordine.

Columnae extentae

Ite somewhere

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

Distinguendis in quibus obstructionum

Si ligamen extensum laborare non videtur, clausus continens causa verisimiliter erit. Proprietates sequentes CSS elementum continens scandalum efficiet:

Valorem positionquamstatic
A transformvel perspectivepretii quamnone
will-changeValorem transformvel _perspective
A filtervalorem aliud quam nonevel will-changevalorem ipsius filter(in Firefox tantum operatur)

Card extenta nexus

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Vinculum extensum hic non operatur, quia position: relativead nexum additur

Haec nexus extenta solum super p-tag dilatabitur, quia transformatio applicatur.

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