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. Vinsamlegast athugið, miðað við hvernig CSS positionvirkar , .stretched-linker ekki hægt að blanda saman við flesta töfluþætti.

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>

Flestir sérsniðnir íhlutir hafa ekki position: relativesjálfgefið, þannig að við þurfum að bæta við .position-relativehér til að koma í veg fyrir að hlekkurinn teygi sig út fyrir móðurþáttinn.

Sérsniðinn hluti með teygðum hlekk

Þetta er staðgengilsefni fyrir sérsniðna íhlutinn. Það er ætlað að líkja eftir því hvernig eitthvað raunverulegt efni myndi líta út og við erum að nota það hér til að gefa íhlutnum smá líkama og stærð.

Farðu eitthvert

<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úlur með teygðum hlekk

Annað dæmi um staðgengilsefni fyrir þennan annan sérsniðna íhlut. Það er ætlað að líkja eftir því hvernig eitthvað raunverulegt efni myndi líta út og við erum að nota það hér til að gefa íhlutnum smá líkama og stærð.

Farðu eitthvert

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

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>