Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
Check
in English

Ištempta nuoroda

Padarykite bet kurį HTML elementą arba „Bootstrap“ komponentą spustelėjus „ištempdami“ įdėtą nuorodą per CSS.

Pridėkite .stretched-linkprie nuorodos, kad ją turintį bloką būtų galima spustelėti naudojant ::afterpseudoelementą. Daugeliu atvejų tai reiškia, kad elementą position: relative;, kuriame yra nuoroda į .stretched-linkklasę, galima spustelėti. Atkreipkite dėmesį, kaip veikia CSSposition , .stretched-linknegalima 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-linkklasę prie nuorodos kortelėje be jokių kitų HTML pakeitimų.

Naudojant ištemptas nuorodas, nerekomenduojama naudoti kelių nuorodų ir palietimo objektų. Tačiau kai kurie positionir z-indexstiliai gali padėti, jei to reikia.

Card image cap
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
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>

Dauguma tinkintų komponentų position: relativepagal numatytuosius nustatymus neturi, todėl turime pridėti .position-relativečia, kad saitas neištemptų už pagrindinio elemento ribų.

Generic placeholder image
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
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>
Generic placeholder image
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
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>

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 positionvertė neistatic
  • A transformarba perspectivekitokia vertė neinone
  • arba will-changevertė _transformperspective
  • Kita filternei reikšmė nonearba will-changereikšmė filter(veikia tik „Firefox“)
Card image cap
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: relativeyra pridėta prie nuorodos

Ši ištempta nuoroda bus paskirstyta tik pžymoje -, nes jai taikoma transformacija.

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>