Nyújtott link
Tegye bármelyik HTML-elemet vagy Bootstrap-komponenst kattinthatóvá egy beágyazott hivatkozás CSS-en keresztüli „kinyújtásával”.
Adjon .stretched-link
hozzá egy hivatkozást, hogy azt tartalmazó blokkot::after
pszeudoelemen keresztül kattinthatóvá tegye. A legtöbb esetben ez azt jelenti, hogy position: relative;
az osztályra mutató hivatkozást tartalmazó elem .stretched-link
kattintható. Kérjük, vegye figyelembe, hogy a CSS hogyan position
működik , .stretched-link
nem keverhető a legtöbb táblázat elemmel.
A kártyák position: relative
alapértelmezés szerint a Bootstrapben vannak, így ebben az esetben nyugodtan hozzáadhatja az .stretched-link
osztályt a kártyán lévő hivatkozáshoz, minden egyéb HTML-módosítás nélkül.
Nyújtott hivatkozások esetén nem javasolt több hivatkozás és koppintási cél. Néhány position
és z-index
stílus azonban segíthet, ha erre szükség van.
Kártya feszített linkkel
Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.
Elmenni valahova<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>
A legtöbb egyéni komponens alapértelmezés szerint nem rendelkezik position: relative
, ezért ide kell hozzáadnunk .position-relative
, hogy megakadályozzuk, hogy a hivatkozás a szülőelemen kívülre nyúljon.
Egyedi alkatrész feszített linkkel
Ez az egyéni összetevő néhány helyőrző tartalma. Célja, hogy utánozza, hogyan nézne ki néhány valós tartalom, és itt azt használjuk, hogy egy kicsit testet és méretet adjunk az összetevőnek.
Elmenni valahova<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>
Oszlopok feszített linkkel
Helyőrző tartalom egy másik példánya ehhez a másik egyéni összetevőhöz. Célja, hogy utánozza, hogyan nézne ki néhány valós tartalom, és itt azt használjuk, hogy egy kicsit testet és méretet adjunk az összetevőnek.
Elmenni valahova<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 tartalmazó blokk azonosítása
Ha úgy tűnik, hogy a megfeszített hivatkozás nem működik, valószínűleg a tartalmazó blokk lesz az oka. A következő CSS-tulajdonságok teszik az elemet tartalmazó blokkot:
- Más
position
érték, mintstatic
- A
transform
vagyperspective
más érték, mintnone
- A vagy
will-change
értéketransform
perspective
- Más
filter
értéknone
vagywill-change
értékfilter
(csak Firefoxon működik)
Kártya feszített linkekkel
Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.
A nyújtott hivatkozás itt nem fog működni, mert position: relative
hozzáadva van a hivatkozáshoz
Ez a kinyújtott hivatkozás csak a -tag felett lesz elosztva p
, mert transzformáció kerül rá.
<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>