Venitatud link

Muutke mis tahes HTML-element või Bootstrapi komponent klõpsatavaks, "venitades" pesastatud linki CSS-i kaudu.

Lisage .stretched-linklingile, et muuta seda sisaldav plokk::after pseudoelemendi kaudu klõpsatavaks . Enamasti tähendab see, et element, position: relative;mis sisaldab linki .stretched-linkklassiga, on klõpsatav.

Kaartidel on position: relativevaikimisi Bootstrap, nii et sel juhul saate .stretched-linkklassi ohutult lisada kaardil olevale lingile ilma muude HTML-i muudatusteta.

Venitatud linkidega pole soovitatav kasutada mitut linki ja puudutusmärke. Siiski võivad mõned positionja z-indexstiilid aidata, kui seda vaja läheb.

Venitatud lingiga kaart

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Mine kuhugi

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

Meediumiobjektidel position: relativevaikimisi pole, seega peame .position-relativesiia lisama, et vältida lingi venimist väljapoole meediumiobjekti.

Meedia venitatud lingiga

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.

Mine kuhugi

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

Veerud on position: relativevaikimisi, nii et klõpsatavad veerud nõuavad .stretched-linkklassi ainult lingil. Kuid lingi venitamine üle terve on .rowvajalik .position-staticveerus ja .position-relativereal.

Venitatud lingiga veerud

Mine kuhugi

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

Sisaldava ploki tuvastamine

Kui venitatud link ei paista töötavat, on tõenäoliselt põhjuseks sisaldav plokk . Järgmised CSS-i atribuudid muudavad elemendi sisaldava ploki:

Muu positionväärtus kuistatic
A transformvõi perspectivemuu väärtus kuinone
will-changeVäärtus transformvõi _perspective
filterMuu väärtus kui nonevõi will-changeväärtus ( filtertöötab ainult Firefoxis)

Venitatud linkidega kaart

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Venitatud link siin ei tööta, kuna position: relativeon lingile lisatud

See venitatud link levib ainult psildi peal, kuna sellele rakendatakse teisendus.

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