Lien étiré

Rendez tout élément HTML ou composant Bootstrap cliquable en "étirant" un lien imbriqué via CSS.

Ajouter .stretched-linkà un lien pour rendre son bloc contenant cliquable via un ::afterpseudo-élément. Dans la plupart des cas, cela signifie qu'un élément position: relative;contenant un lien avec la .stretched-linkclasse est cliquable.

Les cartes ont position: relativepar défaut dans Bootstrap, donc dans ce cas, vous pouvez ajouter en toute sécurité la .stretched-linkclasse à un lien dans la carte sans aucune autre modification HTML.

Les liens multiples et les cibles tactiles ne sont pas recommandés avec les liens étirés. Cependant, certains styles positionet z-indexpeuvent aider si cela est nécessaire.

Carte avec lien tendu

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Aller quelque part

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

Les objets multimédias n'ont pas position: relativepar défaut, nous devons donc ajouter .position-relativeici pour empêcher le lien de s'étendre en dehors de l'objet multimédia.

Médias avec lien étiré

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibule en vulputé à, tempus viverra turpis. Fusce condimentum nunc ac nisi fringille vulputée. Donec lacinia congue felis in faucibus.

Aller quelque part

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

Les colonnes sont position: relativepar défaut, donc les colonnes cliquables ne nécessitent que la .stretched-linkclasse sur un lien. Cependant, étirer un lien sur un entier .rownécessite .position-staticsur la colonne et .position-relativesur la ligne.

Colonnes avec lien étiré

Aller quelque part

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

Identification du bloc conteneur

Si le lien étiré ne semble pas fonctionner, le bloc conteneur en sera probablement la cause. Les propriétés CSS suivantes feront d'un élément le bloc conteneur :

Une positionvaleur autre questatic
A transformou perspectivevaleur autre quenone
Une will-changevaleur de transformouperspective
Une filtervaleur autre que noneou une will-changevaleur de filter(ne fonctionne que sur Firefox)

Carte avec liens étirés

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Le lien étiré ne fonctionnera pas ici, car il position: relativeest ajouté au lien

Ce lien étiré ne sera étendu que sur la pbalise -, car une transformation lui est appliquée.

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