Gean nei haadynhâld Gean nei dokumintnavigaasje
Check
in English

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.

Card image cap
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.

Generic placeholder image
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>
Generic placeholder image
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)
Card image cap
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>