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.

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

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

Pagal numatytuosius nustatymus medijos objektai neturi position: relative, todėl turime pridėti .position-relativečia, kad saitas neištemptų už medijos objekto ribų.

Žiniasklaida su ištempta nuoroda

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Eik kur nors

<div class="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media with stretched link</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Stulpeliai yra position: relativepagal numatytuosius nustatymus, todėl stulpeliams, kuriuos galima spustelėti, reikia tik .stretched-linknuorodos klasės. Tačiau norint ištempti nuorodą per visą .rowstulpelį .position-staticir .position-relativeeilutę.

Stulpeliai su ištempta nuoroda

Eik kur nors

<div class="row no-gutters 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 position-static p-4 pl-md-0">
    <h5 class="mt-0">Columns with stretched link</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</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.

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