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. Arvestades , kuidas CSS positiontöötab , .stretched-linkei saa seda enamiku tabelielementidega segada.

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

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>

Enamikul kohandatud komponentidel position: relativevaikimisi pole, seega peame .position-relativesiia lisama, et vältida lingi venitamist väljapoole emaelementi.

Venitatud lingiga kohandatud komponent

See on kohandatud komponendi kohatäite sisu. Selle eesmärk on jäljendada seda, kuidas mõni reaalne sisu välja näeks, ja me kasutame seda siin, et anda komponendile keha ja suurus.

Mine kuhugi

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>

Venitatud lingiga veerud

Teine kohatäite sisu eksemplar selle teise kohandatud komponendi jaoks. Selle eesmärk on jäljendada seda, kuidas mõni reaalne sisu välja näeks, ja me kasutame seda siin, et anda komponendile keha ja suurus.

Mine kuhugi

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>

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.

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>