Sträckt länk
Gör alla HTML-element eller Bootstrap-komponenter klickbara genom att "sträcka ut" en kapslad länk via CSS.
Lägg .stretched-link
till i en länk för att göra dess innehållsblock klickbart via ett ::after
pseudoelement. I de flesta fall betyder det att ett element med position: relative;
som innehåller en länk till .stretched-link
klassen är klickbart. Vänligen notera med tanke på hur CSS position
fungerar , .stretched-link
inte kan blandas med de flesta tabellelement.
Kort har position: relative
som standard i Bootstrap, så i det här fallet kan du säkert lägga till .stretched-link
klassen till en länk på kortet utan några andra HTML-ändringar.
Flera länkar och tryckmål rekommenderas inte med sträckta länkar. Vissa position
och z-index
stilar kan dock hjälpa om detta skulle behövas.
Kort med sträckt länk
Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.
Gå någonstans<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 flesta anpassade komponenter har inte som position: relative
standard, så vi måste lägga till .position-relative
här för att förhindra att länken sträcker sig utanför det överordnade elementet.
Anpassad komponent med sträckt länk
Detta är en del platshållarinnehåll för den anpassade komponenten. Den är avsedd att efterlikna hur något verkligt innehåll skulle se ut, och vi använder det här för att ge komponenten lite kropp och storlek.
Gå någonstans<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>
Kolumner med sträckt länk
Ytterligare en instans av platshållarinnehåll för den här andra anpassade komponenten. Den är avsedd att efterlikna hur något verkligt innehåll skulle se ut, och vi använder det här för att ge komponenten lite kropp och storlek.
Gå någonstans<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>
Identifiera innehållsblocket
Om den sträckta länken inte verkar fungera är det troligtvis det innehållande blocket som är orsaken. Följande CSS-egenskaper kommer att göra ett element till det innehållande blocket:
- Ett
position
annat värde änstatic
- A
transform
ellerperspective
värde annat ännone
- Ett
will-change
värde påtransform
ellerperspective
- Ett
filter
annat värde ännone
eller ettwill-change
värde påfilter
(fungerar bara på Firefox)
Kort med sträckta länkar
Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.
Sträckt länk kommer inte att fungera här, eftersom position: relative
den läggs till i länken
Denna sträckta länk kommer bara att spridas över p
-taggen, eftersom en transformation appliceras på den.
<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>