Ištempta nuoroda
Padarykite bet kurį HTML elementą arba „Bootstrap“ komponentą spustelėjus „ištempdami“ įdėtą nuorodą per CSS.
Pridėkite .stretched-link
prie nuorodos, kad ją turintį bloką būtų galima spustelėti naudojant ::after
pseudoelementą. Daugeliu atvejų tai reiškia, kad elementą position: relative;
, kuriame yra nuoroda į .stretched-link
klasę, galima spustelėti. Atkreipkite dėmesį, kaip veikia CSSposition
, .stretched-link
negalima maišyti su dauguma lentelės elementų.
Pagal numatytuosius nustatymus kortelės yra position: relative
„Bootstrap“, todėl šiuo atveju galite saugiai pridėti .stretched-link
klasę prie nuorodos kortelėje be jokių kitų HTML pakeitimų.
Naudojant ištemptas nuorodas, nerekomenduojama naudoti kelių nuorodų ir palietimo objektų. Tačiau kai kurie position
ir z-index
stiliai gali padėti, jei to reikia.
Kortelė su ištempta nuoroda
Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.
Eik kur nors<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>
Dauguma tinkintų komponentų position: relative
pagal numatytuosius nustatymus neturi, todėl turime pridėti .position-relative
čia, kad saitas neištemptų už pagrindinio elemento ribų.
Pasirinktinis komponentas su ištempta jungtimi
Tai yra tam tikras tinkinto komponento rezervuotos vietos turinys. Jis skirtas imituoti, kaip atrodytų realus turinys, ir mes naudojame jį čia, kad suteiktume komponentui šiek tiek kūno ir dydžio.
Eik kur nors<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>
Stulpeliai su ištempta nuoroda
Kitas šio priskirto komponento rezervuotos vietos turinio pavyzdys. Jis skirtas imituoti, kaip atrodytų realus turinys, ir mes naudojame jį čia, kad suteiktume komponentui šiek tiek kūno ir dydžio.
Eik kur nors<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>
Bloko, kuriame yra, identifikavimas
Jei atrodo, kad ištempta nuoroda neveikia, greičiausiai priežastis bus blokas, kuriame yra . Šios CSS savybės pavers elementą turinčiu bloku:
- Kita
position
vertė neistatic
- A
transform
arbaperspective
kitokia vertė neinone
- arba
will-change
vertė _transform
perspective
- Kita
filter
nei reikšmėnone
arbawill-change
reikšmėfilter
(veikia tik „Firefox“)
Kortelė su ištemptomis nuorodomis
Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.
Ištempta nuoroda čia neveiks, nes position: relative
yra pridėta prie nuorodos
Ši ištempta nuoroda bus paskirstyta tik p
žymoje -, nes jai taikoma 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>