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-linktill i en länk för att göra dess innehållsblock klickbart via ett ::afterpseudoelement. I de flesta fall betyder det att ett element med position: relative;som innehåller en länk till .stretched-linkklassen är klickbart. Vänligen notera med tanke på hur CSS positionfungerar , .stretched-linkinte kan blandas med de flesta tabellelement.

Kort har position: relativesom standard i Bootstrap, så i det här fallet kan du säkert lägga till .stretched-linkklassen 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 positionoch z-indexstilar 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

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 flesta anpassade komponenter har inte som position: relativestandard, så vi måste lägga till .position-relativehä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

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>

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

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>

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 positionannat värde änstatic
A transformeller perspectivevärde annat ännone
Ett will-changevärde på transformellerperspective
Ett filterannat värde än noneeller ett will-changevä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: relativeden läggs till i länken

Denna sträckta länk kommer bara att spridas över p-taggen, eftersom en transformation appliceras på den.

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>