Udstrakt led
Gør ethvert HTML-element eller Bootstrap-komponent klikbart ved at "strække" et indlejret link via CSS.
Tilføj .stretched-link
til et link for at gøre dets indholdsblok klikbar via et ::after
pseudo-element. I de fleste tilfælde betyder det, at et element med position: relative;
, der indeholder et link til .stretched-link
klassen, er klikbart. Bemærk venligst, at givet hvordan CSS position
fungerer , .stretched-link
kan ikke blandes med de fleste tabelelementer.
Kort har position: relative
som standard i Bootstrap, så i dette tilfælde kan du trygt tilføje .stretched-link
klassen til et link på kortet uden andre HTML-ændringer.
Flere links og trykmål anbefales ikke med strakte links. Nogle position
og z-index
stilarter 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<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: relative
som standard, så vi er nødt til at tilføje .position-relative
her 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<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<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
position
anden værdi endstatic
- A
transform
ellerperspective
anden værdi endnone
- En
will-change
værdi påtransform
ellerperspective
- En
filter
anden værdi endnone
eller enwill-change
værdi affilter
(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: relative
det er tilføjet til linket
Dette udstrakte link vil kun blive spredt over p
-tagget, fordi der anvendes en transformation på det.
<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>