pinterest linkedin behance copy

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 ::after pseudo-élément. Dans la plupart des cas, cela signifie qu'un élément position: relative; contenant un lien avec la .stretched-link classe est cliquable. Veuillez noter que, compte tenu du fonctionnement du CSSposition, .stretched-link ne peut pas être mélangé avec la plupart des éléments de tableau.

Les cartes ont position: relative par défaut dans Bootstrap, donc dans ce cas, vous pouvez ajouter en toute sécurité la .stretched-link classe à 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 position et z-index peuvent aider si cela est nécessaire.

Card image cap
Carte avec lien étiré

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

En savoir plus 
<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>

La plupart des composants personnalisés n'ont pas position: relative par défaut, nous devons donc ajouter .position-relative ici pour empêcher le lien de s'étendre en dehors de l'élément parent.

Generic placeholder image
Composant personnalisé avec lien étiré

Il s'agit d'un contenu d'espace réservé pour le composant personnalisé. Il est destiné à imiter à quoi ressemblerait un contenu du monde réel, et nous l'utilisons ici pour donner un peu de corps et de taille au composant.

En savoir plus 
<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>
Generic placeholder image
Colonnes avec liens étiré

Une autre instance de contenu d'espace réservé pour cet autre composant personnalisé. Il est destiné à imiter à quoi ressemblerait un contenu du monde réel, et nous l'utilisons ici pour donner au composant un peu de corps et de taille.

En savoir plus 
<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>

Identification du bloc contenant

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 position valeur autre que static
  • Une transform oou perspective valeur autre que none
  • Une will-change valeur de transform ou perspective
  • Une filter valeur autre que none ou une will-change valeur de filter (ne fonctionne que sur Firefox)
Card image cap
Carte avec lien étiré

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

Le lien étiré ne fonctionnera pas ici, car position: relative est ajouté au lien

Ce lien étiré ne sera étendu que sur la p-balise, 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>

© 2010-2024 QZYcodes by Quazerty.