Udstrakt led

Gør ethvert HTML-element eller Bootstrap-komponent klikbart ved at "strække" et indlejret link via CSS.

Tilføj .stretched-linktil et link for at gøre dets indholdsblok klikbar via et ::afterpseudo-element. I de fleste tilfælde betyder det, at et element med position: relative;, der indeholder et link til .stretched-linkklassen, er klikbart. Bemærk venligst, at givet hvordan CSS positionfungerer , .stretched-linkkan ikke blandes med de fleste tabelelementer.

Kort har position: relativesom standard i Bootstrap, så i dette tilfælde kan du trygt tilføje .stretched-linkklassen til et link på kortet uden andre HTML-ændringer.

Flere links og trykmål anbefales ikke med strakte links. Nogle positionog z-indexstilarter kan dog hjælpe, hvis dette er nødvendigt.

Kort med strakt led

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Gå et sted hen

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 fleste brugerdefinerede komponenter har ikke position: relativesom standard, så vi er nødt til at tilføje .position-relativeher for at forhindre linket i at strække sig uden for det overordnede element.

Brugerdefineret komponent med strakt led

Dette er noget pladsholderindhold for den tilpassede komponent. Det er beregnet til at efterligne, hvordan noget indhold fra den virkelige verden ville se ud, og vi bruger det her for at give komponenten en smule krop og størrelse.

Gå et sted hen

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>

Søjler med strakt led

Endnu en forekomst af pladsholderindhold for denne anden tilpassede komponent. Det er beregnet til at efterligne, hvordan noget indhold fra den virkelige verden ville se ud, og vi bruger det her for at give komponenten en smule krop og størrelse.

Gå et sted hen

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>

Identifikation af den indeholdende blok

Hvis det strakte led ikke ser ud til at virke, vil den indeholdende blok sandsynligvis være årsagen. Følgende CSS-egenskaber vil gøre et element til den indeholdende blok:

En positionanden værdi endstatic
A transformeller perspectiveanden værdi endnone
En will-changeværdi på transformellerperspective
En filteranden værdi end noneeller en will-changeværdi af filter(virker kun på Firefox)

Kort med strakte led

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Udstrakt link vil ikke virke her, fordi position: relativedet er tilføjet til linket

Dette udstrakte link vil kun blive spredt over p-tagget, fordi der anvendes en transformation på det.

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>