Natažený odkaz

Udělejte klikací na jakýkoli prvek HTML nebo komponentu Bootstrap „roztažením“ vnořeného odkazu pomocí CSS.

Přidat .stretched-linkk odkazu, aby bylo možné kliknout na blok, který obsahuje::after , prostřednictvím pseudo prvku. Ve většině případů to znamená, že na prvek position: relative;, který obsahuje odkaz na .stretched-linktřídu, lze kliknout.

Karty mají position: relativeve výchozím nastavení Bootstrap, takže v tomto případě můžete .stretched-linktřídu bezpečně přidat do odkazu na kartě bez dalších změn HTML.

U roztažených odkazů se nedoporučuje používat více odkazů a cílů klepnutí. Nicméně, některé positiona z-indexstyly mohou pomoci, pokud je to požadováno.

Karta s nataženým odkazem

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Jít někam

<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ální objekty ve výchozím nastavení nemají position: relative, takže musíme přidat .position-relativesem, aby se zabránilo roztažení odkazu mimo objekt média.

Média s nataženým odkazem

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.

Jít někam

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

Sloupce jsou position: relativeve výchozím nastavení, takže klikatelné sloupce vyžadují pouze .stretched-linktřídu na odkazu. Roztažení odkazu přes celek však .rowvyžaduje .position-staticsloupec a .position-relativeřádek.

Sloupky s nataženým článkem

Jít někam

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

Identifikace obsahujícího bloku

Pokud se zdá, že natažený odkaz nefunguje, příčinou bude pravděpodobně blok, který obsahuje . Následující vlastnosti CSS udělají z prvku blok obsahující:

Jiná positionhodnota nežstatic
A transformnebo perspectivejiná hodnota nežnone
Hodnota nebo will-change_transformperspective
Jiná filterhodnota než nonenebo will-changehodnota filter(funguje pouze ve Firefoxu)

Karta s nataženými odkazy

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Natažený odkaz zde nebude fungovat, protože position: relativeje přidán do odkazu

Tento roztažený odkaz bude rozprostřen pouze přes p-tag, protože je na něj aplikována transformace.

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