Passer au contenu principal Passer à la navigation dans les documents
Check
in English

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. Veuillez noter que, compte tenu du fonctionnement du CSSposition , .stretched-linkil ne peut pas être mélangé avec la plupart des éléments de tableau.

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.

Card image cap
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
html
<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: relativepar défaut, nous devons donc ajouter .position-relativeici 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 au composant un peu de corps et de taille.

Aller quelque part
html
<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 lien é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.

Aller quelque part
html
<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 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)
Card image cap
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.

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