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. Tink derom, jûn hoe't CSS positionwurket , .stretched-linkkin net mingd wurde mei de measte tabeleleminten.

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

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 measte oanpaste komponinten hawwe net position: relativestandert, dus wy moatte de .position-relativehjir tafoegje om foar te kommen dat de keppeling bûten it âlderelemint strekt.

Oanpaste komponint mei útwreide keppeling

Dit is wat plakhâlder ynhâld foar de oanpaste komponint. It is bedoeld om te imitearjen hoe guon ynhâld yn 'e echte wrâld der útsjen soe, en wy brûke it hjir om it komponint in bytsje lichem en grutte te jaan.

Earne hinne gean

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 mei útwreide keppeling

In oare eksimplaar fan plakhâlder ynhâld foar dizze oare oanpaste komponint. It is bedoeld om te imitearjen hoe guon ynhâld yn 'e echte wrâld der útsjen soe, en wy brûke it hjir om it komponint in bytsje lichem en grutte te jaan.

Earne hinne gean

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>

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.

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>