Teygður hlekkur

Gerðu hvaða HTML frumefni eða Bootstrap íhlut sem er smellanlegan með því að „teygja“ hreiður hlekk í gegnum CSS.

Bættu .stretched-linkvið hlekk til að gera innihaldsblokk hans smellanlegan með ::aftergervieiningu. Í flestum tilfellum þýðir þetta að þáttur position: relative;sem inniheldur tengil við .stretched-linkbekkinn er smellanleg.

Kort hafa position: relativesjálfgefið í Bootstrap, svo í þessu tilfelli geturðu örugglega bætt .stretched-linkbekknum við tengil á kortinu án annarra HTML breytinga.

Ekki er mælt með mörgum hlekkjum og snertimörkum með teygðum hlekkjum. Hins vegar geta sumir positionog z-indexstíll hjálpað ef þess er krafist.

Kort með teygðum hlekk

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Farðu eitthvert

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

Fjölmiðlahlutir hafa ekki position: relativesjálfgefið, svo við þurfum að bæta við .position-relativehér til að koma í veg fyrir að hlekkurinn teygi sig út fyrir miðlunarhlutinn.

Fjölmiðlar með teygðum hlekk

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 í faucibus.

Farðu eitthvert

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

Dálkar eru position: relativesjálfgefið, þannig að smellanlegir dálkar þurfa aðeins .stretched-linkbekkinn á hlekk. .rowHins vegar þarf að teygja tengil yfir heilan .position-staticdálk og .position-relativeí röðinni.

Súlur með teygðum hlekk

Farðu eitthvert

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

Að bera kennsl á blokkina sem inniheldur

Ef teygði hlekkurinn virðist ekki virka mun kubburinn sem inniheldur sennilega vera orsökina. Eftirfarandi CSS eiginleikar gera frumefni að blokkinni sem inniheldur:

Annað positiongildi enstatic
A transformeða perspectivegildi annað ennone
will-changeGildi transformeða _perspective
Annað filtergildi en noneeða will-changegildi fyrir filter(virkar aðeins á Firefox)

Kort með teygðum hlekkjum

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Teygður hlekkur mun ekki virka hér, því position: relativehann er bætt við hlekkinn

Þessi teygði hlekkur mun aðeins dreifast yfir p-merkið, vegna þess að umbreytingu er beitt á það.

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