Raztegnjena povezava
Naredite kateri koli element HTML ali komponento Bootstrap, ki jo je mogoče klikniti, tako da "raztegnete" ugnezdeno povezavo prek CSS.
Dodajte .stretched-link
na povezavo, da bo blok, ki ga vsebuje, mogoče klikniti prek ::after
psevdo elementa. V večini primerov to pomeni, da je mogoče klikniti element position: relative;
, ki vsebuje povezavo z .stretched-link
razredom. Upoštevajte, kako CSS position
deluje , .stretched-link
ga ni mogoče mešati z večino elementov tabele.
Kartice imajo position: relative
privzeto v Bootstrapu, tako da lahko v tem primeru varno dodate .stretched-link
razred na povezavo na kartici brez drugih sprememb HTML.
Pri raztegnjenih povezavah ni priporočljivo uporabljati več povezav in ciljev dotika. Vendar pa lahko nekateri position
slogi z-index
pomagajo, če je to potrebno.
Kartica z raztegnjeno povezavo
Nekaj hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.
Pojdi nekam<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>
Večina komponent po meri nima position: relative
privzetih vrednosti, zato moramo .position-relative
tukaj dodati, da preprečimo, da bi se povezava raztegnila izven nadrejenega elementa.
Komponenta po meri z raztegnjeno povezavo
To je nekaj nadomestne vsebine za komponento po meri. Namenjen je posnemanju, kako bi izgledala nekatera vsebina iz resničnega sveta, in tukaj jo uporabljamo, da komponenti damo malo telesa in velikosti.
Pojdi nekam<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>
Stolpci z raztegnjeno povezavo
Še en primerek vsebine nadomestnega znaka za to drugo komponento po meri. Namenjen je posnemanju, kako bi izgledala nekatera vsebina iz resničnega sveta, in tukaj jo uporabljamo, da komponenti damo malo telesa in velikosti.
Pojdi nekam<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>
Prepoznavanje vsebovalnega bloka
Če se zdi, da raztegnjena povezava ne deluje, bo verjetno vzrok vsebovalni blok . Naslednje lastnosti CSS bodo element vseboval blok:
position
Vrednost, ki nistatic
- A
transform
aliperspective
vrednost, ki ninone
will-change
Vrednosttransform
oz _perspective
filter
Vrednost, ki ni alinone
vrednostwill-change
(filter
deluje samo v Firefoxu)
Kartica z raztegnjenimi povezavami
Nekaj hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.
Raztegnjena povezava tukaj ne bo delovala, ker position: relative
je dodana povezavi
Ta raztegnjena povezava bo razpršena le čez oznako p
-tag, ker je zanjo uporabljena transformacija.
<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>