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. Houd er rekening mee dat hoe CSS positionwerkt , .stretched-linkniet kan worden gemengd met de meeste tabelelementen.

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

html

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

De meeste gebruikerscomponenten hebben dit position: relativestandaard niet, dus we moeten het .position-relativehier toevoegen om te voorkomen dat de link zich uitstrekt buiten het bovenliggende element.

Gebruikerscomponent met uitgerekte link

Dit is tijdelijke inhoud voor de gebruikerscomponent. Het is bedoeld om na te bootsen hoe sommige inhoud uit de echte wereld eruit zou zien, en we gebruiken het hier om het onderdeel een beetje body en grootte te geven.

Ergens heengaan

html

<div class="d-flex position-relative">
  <img src="..." class="flex-shrink-0 me-3" alt="...">
  <div>
    <h5 class="mt-0">Custom component with stretched link</h5>
    <p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Kolommen met uitgerekte link

Nog een instantie van tijdelijke aanduiding-inhoud voor deze andere gebruikerscomponent. Het is bedoeld om na te bootsen hoe sommige inhoud uit de echte wereld eruit zou zien, en we gebruiken het hier om het onderdeel een beetje body en grootte te geven.

Ergens heengaan

html

<div class="row g-0 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 p-4 ps-md-0">
    <h5 class="mt-0">Columns with stretched link</h5>
    <p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</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.

html

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