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.

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ų.

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>

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“)

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>