Strukket lenke

Gjør et hvilket som helst HTML-element eller Bootstrap-komponent klikkbart ved å "strekke" en nestet lenke via CSS.

Legg .stretched-linktil en lenke for å gjøre dens innholdsblokk klikkbar via et ::afterpseudoelement. I de fleste tilfeller betyr dette at et element med position: relative;som inneholder en lenke med .stretched-linkklassen er klikkbart.

Kort har position: relativesom standard i Bootstrap, så i dette tilfellet kan du trygt legge .stretched-linkklassen til en lenke på kortet uten andre HTML-endringer.

Flere lenker og trykkmål anbefales ikke med utstrakte lenker. Noen positionog z-indexstiler kan imidlertid hjelpe dersom dette skulle være nødvendig.

Kort med strukket lenke

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Gå et sted

<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 må legge til .position-relativeher for å forhindre at lenken strekker seg utenfor medieobjektet.

Media med strukket lenke

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

<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å klikkbare kolonner krever bare .stretched-linkklassen på en lenke. Men å strekke en lenke over en hel .rowkrever .position-staticpå kolonnen og .position-relativepå raden.

Søyler med strukket lenke

Gå et sted

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

Identifisere den inneholdende blokken

Hvis den utstrakte lenken ikke ser ut til å fungere, vil den inneholdende blokken sannsynligvis være årsaken. Følgende CSS-egenskaper vil gjøre et element til den inneholdende blokken:

En positionannen verdi ennstatic
A transformeller perspectiveannen verdi ennnone
En will-changeverdi på transformellerperspective
En filterannen verdi enn noneeller en will-changeverdi av filter(fungerer bare på Firefox)

Kort med strakte lenker

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Strukket lenke vil ikke fungere her, fordi position: relativeer lagt til lenken

Denne utstrakte lenken vil bare bli spredt over p-taggen, fordi en transformasjon blir brukt på den.

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