uitgerekte link

Maak elk HTML-element of Bootstrap-component klikbaar door een geneste link via CSS te "uitrekken".

Voeg toe .stretched-linkaan een link om het bevattende blok klikbaar te maken via een ::afterpseudo-element. In de meeste gevallen betekent dit dat een element met position: relative;een link met de .stretched-linkklasse aanklikbaar is.

Kaarten staan position: relativestandaard in Bootstrap, dus in dit geval kun je de klasse veilig toevoegen .stretched-linkaan een link in de kaart zonder andere HTML-wijzigingen.

Meerdere links en tikdoelen worden niet aanbevolen bij uitgerekte links. Sommige stijlen positionen z-indexstijlen kunnen echter helpen als dit nodig is.

Kaart met uitgerekte link

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

Ergens heengaan

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

Media-objecten hebben dit position: relativestandaard niet, dus we moeten het .position-relativehier toevoegen om te voorkomen dat de link zich buiten het media-object uitstrekt.

Media met uitgerekte link

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

Ergens heengaan

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

Kolommen zijn position: relativestandaard, dus klikbare kolommen vereisen alleen de .stretched-linkklasse op een link. Het uitrekken van een schakel over een geheel .rowvereist echter .position-staticop de kolom en .position-relativeop de rij.

Kolommen met uitgerekte link

Ergens heengaan

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

Het bevattende blok identificeren

Als de uitgerekte link niet lijkt te werken, zal het bevattende blok waarschijnlijk de oorzaak zijn. De volgende CSS-eigenschappen maken van een element het bevattende blok:

Een positionandere waarde danstatic
A transformof perspectiveandere waarde dannone
Een will-changewaarde van transformofperspective
Een filterandere waarde dan noneof een will-changewaarde van filter(werkt alleen in Firefox)

Kaart met uitgerekte schakels

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

Uitgerekte link werkt hier niet, omdat position: relativeis toegevoegd aan de link

Deze uitgerekte link wordt alleen verspreid over de p-tag, omdat er een transformatie op wordt toegepast.

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