Venitatud link
Muutke mis tahes HTML-element või Bootstrapi komponent klõpsatavaks, "venitades" pesastatud linki CSS-i kaudu.
Lisage .stretched-link
lingile, et muuta seda sisaldav plokk::after
pseudoelemendi kaudu klõpsatavaks . Enamasti tähendab see, et element, position: relative;
mis sisaldab linki .stretched-link
klassiga, on klõpsatav. Arvestades , kuidas CSS position
töötab , .stretched-link
ei saa seda enamiku tabelielementidega segada.
Kaartidel on position: relative
vaikimisi Bootstrap, nii et sel juhul saate .stretched-link
klassi 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 position
ja z-index
stiilid 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: relative
vaikimisi pole, seega peame .position-relative
siia lisama, et vältida lingi venimist väljapoole meediumiobjekti.
Meedia venitatud lingiga
See on meediaobjekti 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<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>This is some placeholder content for the media object. 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>
Veerud on position: relative
vaikimisi, nii et klõpsatavad veerud nõuavad .stretched-link
klassi ainult lingil. Kuid lingi venitamine üle terve on .row
vajalik .position-static
veerus ja .position-relative
real.
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<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>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
position
väärtus kuistatic
- A
transform
võiperspective
muu väärtus kuinone
will-change
Väärtustransform
või _perspective
filter
Muu väärtus kuinone
võiwill-change
väärtus (filter
töö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: relative
on lingile lisatud
See venitatud link levib ainult p
sildi 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>