Udstrakt led

Gør ethvert HTML-element eller Bootstrap-komponent klikbart ved at "strække" et indlejret link via CSS.

Tilføj .stretched-linktil et link for at gøre dets indholdsblok klikbar via et ::afterpseudo-element. I de fleste tilfælde betyder det, at et element med position: relative;, der indeholder et link til .stretched-linkklassen, er klikbart.

Kort har position: relativesom standard i Bootstrap, så i dette tilfælde kan du trygt tilføje .stretched-linkklassen til et link på kortet uden andre HTML-ændringer.

Flere links og trykmål anbefales ikke med strakte links. Nogle positionog z-indexstilarter kan dog hjælpe, hvis dette er nødvendigt.

Kort med strakt led

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Gå et sted hen

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

Medieobjekter har ikke position: relativesom standard, så vi er nødt til at tilføje .position-relativeher for at forhindre linket i at strække sig uden for medieobjektet.

Medier med strakt link

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate ved, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.

Gå et sted hen

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

Kolonner er position: relativesom standard, så klikbare kolonner kræver kun .stretched-linkklassen på et link. Men at strække et link over en hel .rowkræver .position-staticpå kolonnen og .position-relativepå rækken.

Søjler med strakt led

Gå et sted hen

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

Identifikation af den indeholdende blok

Hvis det strakte led ikke ser ud til at virke, vil den indeholdende blok sandsynligvis være årsagen. Følgende CSS-egenskaber vil gøre et element til den indeholdende blok:

En positionanden værdi endstatic
A transformeller perspectiveanden værdi endnone
En will-changeværdi på transformellerperspective
En filteranden værdi end noneeller en will-changeværdi af filter(virker kun på Firefox)

Kort med strakte led

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Udstrakt link vil ikke virke her, fordi position: relativedet er tilføjet til linket

Dette udstrakte link vil kun blive spredt over p-tagget, fordi der anvendes en transformation på det.

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