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
il 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.
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>
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.
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<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>
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<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 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
position
valeur autre questatic
- A
transform
ouperspective
valeur autre quenone
- Une
will-change
valeur detransform
ouperspective
- Une
filter
valeur autre quenone
ou unewill-change
valeur defilter
(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: 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>