Stretched link

Meitsje elk HTML-elemint as Bootstrap-komponint te klikken troch in geneste keppeling fia CSS te "stretchjen".

Tafoegje .stretched-linkoan in keppeling om it befetsjende blok klikber te meitsjen fia in ::afterpseudo-elemint. Yn 'e measte gefallen betsjut dit dat in elemint position: relative;dêr't in keppeling mei de .stretched-linkklasse mei befettet, klikber is.

Kaarten hawwe position: relativestandert yn Bootstrap, dus yn dit gefal kinne jo feilich tafoegje de .stretched-linkklasse oan in keppeling yn de kaart sûnder oare HTML feroarings.

Meardere keppelings en tapdoelen wurde net oanrikkemandearre mei útwreide keppelings. Guon positionen z-indexstilen kinne lykwols helpe as dit nedich is.

Kaart mei útwreide keppeling

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Earne hinne gean

<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-objekten hawwe net position: relativestandert, dus wy moatte de .position-relativehjir tafoegje om te foarkommen dat de keppeling bûten it media-objekt strekt.

Media mei útwreide keppeling

Cras sit amet nibh libero, yn 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 yn faucibus.

Earne hinne gean

<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 binne position: relativestandert, sadat klikbere kolommen allinich de .stretched-linkklasse op in keppeling fereaskje. It útrekkenjen fan in keppeling oer in heule .rowfereasket lykwols .position-staticop 'e kolom en .position-relativeop' e rige.

Kolommen mei útwreide keppeling

Earne hinne gean

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

Identifikaasje fan it befetsjende blok

As de útstrekte keppeling net liket te wurkjen, sil it befetsjende blok wierskynlik de oarsaak wêze. De folgjende CSS-eigenskippen sille in elemint it befetsjende blok meitsje:

In positionwearde oars asstatic
A transformof perspectivewearde oars asnone
In will-changewearde fan transformofperspective
In filterwearde oars as noneof in will-changewearde fan filter(wurket allinnich op Firefox)

Kaart mei útwreide keppelings

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Stretched keppeling sil net wurkje hjir, omdat position: relativewurdt tafoege oan de keppeling

Dizze útwreide keppeling sil allinich ferspraat wurde oer de p-tag, om't der in transformaasje op tapast wurdt.

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