Ligazón estirada
Fai clic en calquera elemento HTML ou compoñente Bootstrap "estirando" unha ligazón aniñada a través de CSS.
Engadir .stretched-link
a unha ligazón para facer clic no seu bloque que o contén mediante un ::after
pseudoelemento. Na maioría dos casos, isto significa que se pode facer clic nun elemento position: relative;
que contén unha ligazón coa .stretched-link
clase.
As tarxetas teñen position: relative
por defecto Bootstrap, polo que neste caso podes engadir a .stretched-link
clase con seguridade a unha ligazón da tarxeta sen ningún outro cambio de HTML.
Non se recomendan varias ligazóns e obxectivos táctiles con ligazóns estiradas. Non obstante, algúns position
e z-index
estilos poden axudar se isto é necesario.
Tarxeta con ligazón estirada
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Vai a algún ladoOs obxectos multimedia non teñen position: relative
por defecto, polo que necesitamos engadir .position-relative
aquí para evitar que a ligazón se estenda fóra do obxecto multimedia.
Medios con ligazón estirada
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.
Vai a algún ladoAs columnas son position: relative
por defecto, polo que as columnas nas que se pode facer clic só requiren a .stretched-link
clase nunha ligazón. Non obstante, estender unha ligazón sobre unha totalidade .row
require .position-static
na columna e .position-relative
na fila.
Columnas con ligazón estirada
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.
Vai a algún ladoIdentificación do bloque que contén
Se a ligazón estirada non parece funcionar, probablemente o bloque que o conteña sexa a causa. As seguintes propiedades CSS farán que un elemento sexa o bloque que contén:
- Un
position
valor distinto destatic
- A
transform
ouperspective
valor distinto denone
- Un
will-change
valor detransform
ouperspective
- Un
filter
valor que non sexanone
ou unwill-change
valor defilter
(só funciona en Firefox)
Tarxeta con ligazóns estiradas
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
A ligazón estirada non funcionará aquí porque position: relative
se engade á ligazón
Esta ligazón estirada só se espallará sobre a p
etiqueta -, porque se lle aplica unha transformación.