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.

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

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

Medijski objekti nemaju position: relativeprema zadanim postavkama, pa moramo dodati .position-relativeovdje kako bismo spriječili da se veza proteže izvan medijskog objekta.

Mediji s rastegnutom vezom

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.

Ici negdje

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

Stupci su position: relativezadani, tako da stupci na koje se može kliknuti zahtijevaju samo .stretched-linkklasu na vezi. Međutim, rastezanje veze preko cijele .rowzahtijeva .position-staticstupac i .position-relativered.

Stupci s rastegnutom vezom

Ici negdje

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

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
Vrijednost filterkoja nije noneili will-changevrijednost filter(radi samo na Firefoxu)

Kartica s rastegnutim karikama

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

Razvučena veza ovdje neće raditi jer position: relativese dodaje vezi

Ova rastegnuta veza bit će raširena samo preko oznake p- jer se na nju primjenjuje 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>