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.

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

<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>

Mediaobjekt 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 mediaobjektet.

Media med sträckt länk

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate vid, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.

Gå någonstans

<div class="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media with stretched link</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Kolumner är position: relativesom standard, så klickbara kolumner kräver bara .stretched-linkklassen på en länk. Men att sträcka en länk över en hel .rowkräver .position-staticpå kolumnen och .position-relativepå raden.

Kolumner med sträckt länk

Gå någonstans

<div class="row no-gutters 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 position-static p-4 pl-md-0">
    <h5 class="mt-0">Columns with stretched link</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</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.

<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>