Natiahnutý odkaz

Urobte kliknutie na akýkoľvek prvok HTML alebo komponent Bootstrap „natiahnutím“ vnoreného odkazu cez CSS.

Pridajte .stretched-linkk odkazu, aby sa na blok, ktorý obsahuje , dalo kliknúť prostredníctvom ::afterpseudo prvku. Vo väčšine prípadov to znamená, že na prvok position: relative;, ktorý obsahuje prepojenie s .stretched-linktriedou, sa dá kliknúť.

Karty majú position: relativeštandardne v Bootstrape, takže v tomto prípade môžete pokojne pridať .stretched-linktriedu do odkazu na karte bez akýchkoľvek ďalších zmien HTML.

Pri natiahnutých odkazoch sa neodporúča používať viacero odkazov a cieľov klepnutia. Avšak, niektoré positiona z-indexštýly môžu pomôcť, ak je to potrebné.

Karta s natiahnutým odkazom

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Ísť niekam

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

Mediálne objekty v predvolenom nastavení nemajú position: relative, takže tu musíme pridať, aby sme .position-relativezabránili pretiahnutiu odkazu mimo objekt média.

Médium s natiahnutým odkazom

Cras sit amet nibh libero, in gravida nulla. Nulla alebo 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.

Ísť niekam

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

Stĺpce sú position: relativepredvolene, takže klikateľné stĺpce vyžadujú iba .stretched-linktriedu na odkaze. Natiahnutie odkazu cez celok však .rowvyžaduje .position-staticstĺpec a .position-relativeriadok.

Stĺpce s natiahnutým odkazom

Ísť niekam

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

Identifikácia bloku, ktorý obsahuje

Ak sa zdá, že natiahnutý odkaz nefunguje, príčinou bude pravdepodobne blok, ktorý obsahuje . Nasledujúce vlastnosti CSS urobia z prvku blok obsahujúci:

Iná positionhodnota akostatic
A transformalebo perspectiveiná hodnota akonone
Hodnota alebo will-change_transformperspective
Iná filterhodnota nonealebo will-changehodnota filter(funguje iba vo Firefoxe)

Karta s natiahnutými odkazmi

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Natiahnutý odkaz tu nebude fungovať, pretože position: relativeje pridaný k odkazu

Tento natiahnutý odkaz sa rozšíri iba cez p-tag, pretože sa naň použije transformácia.

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