Rastegnuta poveznica

Učinite bilo koji HTML element ili komponentu Bootstrapa klikabilnim "razvlačenjem" ugniježđene veze putem CSS-a.

Dodajte .stretched-linkna poveznicu kako bi blok koji sadrži mogao biti kliknut putem ::afterpseudo elementa. U većini slučajeva to znači da se na element position: relative;koji sadrži vezu s .stretched-linkklasom može kliknuti. Imajte na umu kako CSS positionradi , .stretched-linkne može se miješati s većinom elemenata tablice.

Kartice su position: relativezadane u Bootstrapu, tako da u ovom slučaju možete sigurno dodati .stretched-linkklasu na vezu na kartici bez ikakvih drugih promjena u HTML-u.

Višestruke veze i dodirni ciljevi se ne preporučuju s rastegnutim vezama. Međutim, neki positioni z-indexstilovi mogu pomoći ako je to potrebno.

Kartica s rastegnutom karikom

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Ici negdje

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>

Većina prilagođenih komponenti nema position: relativestandardno, pa moramo dodati .position-relativeovdje kako bismo spriječili da se veza proteže izvan nadređenog elementa.

Prilagođena komponenta s rastegnutom vezom

Ovo je sadržaj rezerviranog mjesta za prilagođenu komponentu. Namijenjen je oponašanju onoga kako bi neki sadržaji iz stvarnog svijeta izgledali, a mi ga ovdje koristimo kako bismo komponenti dali malo tijela i veličine.

Ici negdje

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>

Stupci s rastegnutom vezom

Još jedna instanca sadržaja rezerviranog mjesta za ovu drugu prilagođenu komponentu. Namijenjen je oponašanju onoga kako bi neki sadržaji iz stvarnog svijeta izgledali, a mi ga ovdje koristimo kako bismo komponenti dali malo tijela i veličine.

Ici negdje

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>

Identificiranje sadržavajućeg bloka

Ako se čini da rastegnuta veza ne radi, uzrok će vjerojatno biti blok koji sadrži . Sljedeća CSS svojstva učinit će element sadržavajućim blokom:

Vrijednost positionkoja nijestatic
A transformili perspectivevrijednost koja nijenone
will-changeVrijednost transformili _perspective
A filter value other than none or a will-change value of filter (only works on Firefox)

Card with stretched links

Some quick example text to build on the card title and make up the bulk of the card's content.

Stretched link will not work here, because position: relative is added to the link

This stretched link will only be spread over the p-tag, because a transform is applied to it.

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>