Enllaç estirat
Feu clic a qualsevol element HTML o component Bootstrap "estirant" un enllaç imbricat mitjançant CSS.
Afegiu .stretched-link
a un enllaç per fer clic al seu bloc que conté mitjançant un ::after
pseudoelement. En la majoria dels casos, això vol dir que es pot fer clic en un element position: relative;
que conté un enllaç amb la .stretched-link
classe. Tingueu en compte com funciona CSSposition
, .stretched-link
no es pot combinar amb la majoria dels elements de la taula.
Les targetes tenen position: relative
Bootstrap per defecte, de manera que en aquest cas podeu afegir la .stretched-link
classe amb seguretat a un enllaç de la targeta sense cap altre canvi HTML.
No es recomanen enllaços múltiples i objectius de toc amb enllaços estesos. Tanmateix, alguns position
i z-index
estils poden ajudar si això és necessari.
Targeta amb enllaç estirat
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Anar a algun lloc<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>
Els objectes multimèdia no tenen position: relative
per defecte, així que hem d'afegir .position-relative
aquí per evitar que l'enllaç s'estingui fora de l'objecte multimèdia.
Mitjans amb enllaç estirat
Aquest és un contingut de marcador de posició per a l'objecte multimèdia. Té la intenció d'imitar el que semblaria algun contingut del món real, i aquí l'estem utilitzant per donar-li una mica de cos i mida al component.
Anar a algun lloc<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>This is some placeholder content for the media object. 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>
Les columnes són position: relative
per defecte, de manera que les columnes on es pot fer clic només requereixen la .stretched-link
classe d'un enllaç. No obstant això, estirar un enllaç sobre un sencer .row
requereix .position-static
a la columna i .position-relative
a la fila.
Columnes amb enllaç estirat
Una altra instància de contingut de marcador de posició per a aquest altre component personalitzat. Té la intenció d'imitar el que semblaria algun contingut del món real, i aquí l'estem utilitzant per donar-li una mica de cos i mida al component.
Anar a algun lloc<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>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>
Identificació del bloc que conté
Si sembla que l'enllaç estirat no funciona, probablement el bloc que conté serà la causa. Les següents propietats CSS faran que un element sigui el bloc que conté:
- Un
position
valor diferent destatic
- A
transform
operspective
valor diferent denone
- Un
will-change
valor detransform
operspective
- Un
filter
valor diferentnone
o unwill-change
valor defilter
(només funciona a Firefox)
Targeta amb enllaços estirats
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
L'enllaç estirat no funcionarà aquí perquè position: relative
s'afegeix a l'enllaç
Aquest enllaç estirat només es repartirà per l' p
etiqueta -, perquè s'hi aplica una transformació.
<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>