Enlace estirado
Haz que se pueda hacer clic en cualquier elemento HTML o componente Bootstrap "estirando" un enlace anidado a través de CSS.
Agrega .stretched-link
a un enlace para que sea bloque contenedor (opens in a new tab) en el que se puede hacer clic mediante un pseudoelemento ::after
. En la mayoría de los casos, esto significa que se puede hacer clic en un elemento con position: relative;
que contiene un enlace con la clase .stretched-link
. Ten en cuenta cómo funciona position
(CSS) (opens in a new tab), .stretched-link
no se puede mezclar con la mayoría de los elementos de la tabla.
Las tarjetas tienen position: relative
de forma predeterminada en Bootstrap, por lo que en este caso puedes agregar de forma segura la clase .stretched-link
a un enlace en la tarjeta sin ningún otro cambio de HTML.
No se recomiendan múltiples enlaces y objetivos táctiles con enlaces extendidos. Sin embargo, algunos estilos de position
y z-index
pueden ayudar si fuera necesario.
<div class="card" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" role="img"
aria-label="Cap de imagen de tarjeta" focusable="false" preserveAspectRatio="xMidYMid slice"
xmlns="http://www.w3.org/2000/svg">
<title>Cap de imagen de tarjeta</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
</svg>
<div class="card-body">
<h5 class="card-title">Tarjeta con enlace estirado</h5>
<p class="card-text">Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la
mayor parte del contenido de la tarjeta.</p>
<a href="#" class="btn btn-primary stretched-link">Ve a algún lado</a>
</div>
</div>
La mayoría de los componentes personalizados no tienen position: relative
de forma predeterminada, por lo que debemos agregar .position-relative
aquí para evitar que el enlace se extienda fuera del elemento padre.
<div class="d-flex position-relative">
<svg class="bd-placeholder-img flex-shrink-0 me-3" width="144" height="144" role="img"
aria-label="Imagen de marcador de posición genérico" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Imagen de marcador de posición genérico</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
</svg>
<div>
<h5 class="mt-0">Componente personalizado con enlace estirado</h5>
<p>Este es un contenido de marcador de posición para el componente personalizado. Su objetivo es imitar
cómo se vería algún contenido del mundo real, y lo estamos usando aquí para darle al componente un
poco de cuerpo y tamaño.</p>
<a href="#" class="stretched-link">Ve a algún lado</a>
</div>
</div>
<div class="row g-0 bg-body-secondary position-relative">
<div class="col-md-6 mb-md-0 p-md-4">
<svg class="bd-placeholder-img w-100" width="100%" height="200" role="img"
aria-label="Imagen de marcador de posición genérico" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Imagen de marcador de posición genérico</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
</svg>
</div>
<div class="col-md-6 p-4 ps-md-0">
<h5 class="mt-0">Columnas con enlace estirado</h5>
<p>Otra instancia de contenido de marcador de posición para este otro componente personalizado. Su
objetivo es imitar cómo se vería algún contenido del mundo real, y lo estamos usando aquí para darle
al componente un poco de cuerpo y tamaño.</p>
<a href="#" class="stretched-link">Ve a algún lado</a>
</div>
</div>
Identificar el bloque contenedor
Si el enlace extendido no parece funcionar, el bloque contenedor (opens in a new tab) probablemente será la causa. Las siguientes propiedades CSS convertirán a un elemento en el bloque contenedor:
- Un valor de
position
distinto destatic
- Un valor de
transform
operspective
distinto denone
- Un valor
will-change
detransform
operspective
- Un valor de
filter
distinto denone
o un valorwill-change
defilter
(sólo funciona en Firefox)
<div class="card" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" role="img"
aria-label="Cap de imagen de tarjeta" focusable="false" preserveAspectRatio="xMidYMid slice"
xmlns="http://www.w3.org/2000/svg">
<title>Cap de imagen de tarjeta</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
</svg>
<div class="card-body">
<h5 class="card-title">Tarjeta con enlaces estirados</h5>
<p class="card-text">Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la
mayor parte del contenido de la tarjeta.</p>
<p class="card-text">
<a href="#" class="stretched-link text-danger" style="position: relative;">El enlace extendido no
funcionará aquí, porque <code>position: relative</code> se agrega al enlace</a>
</p>
<p class="card-text bg-body-tertiary" style="transform: rotate(0);">
Este <a href="#" class="text-warning stretched-link">enlace extendido</a> solo se distribuirá en la
etiqueta <code>p</code>, porque se le aplica una transformación.
</p>
</div>
</div>