Enlace estirado
Haga que se pueda hacer clic en cualquier elemento HTML o componente de Bootstrap "estirando" un enlace anidado a través de CSS.
Agregue .stretched-link
a un enlace para hacer que se pueda hacer clic en su bloque contenedor a través de un ::after
pseudo elemento. En la mayoría de los casos, esto significa que se puede hacer clic en un elemento position: relative;
que contiene un enlace con la .stretched-link
clase. Tenga en cuenta que dado cómo funciona CSSposition
, .stretched-link
no se puede mezclar con la mayoría de los elementos de la tabla.
Las tarjetas tienen position: relative
Bootstrap de forma predeterminada, por lo que en este caso puede agregar la .stretched-link
clase de manera segura 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. position
Sin embargo , algunos z-index
estilos pueden ayudar en caso de que sea necesario.
Tarjeta con enlace estirado
Un texto de ejemplo rápido para construir sobre el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.
Ir a alguna parte<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 mayoría de los componentes personalizados no tienen position: relative
por defecto, por lo que debemos agregar .position-relative
aquí para evitar que el enlace se extienda fuera del elemento principal.
Componente personalizado con enlace ampliado
Este es un contenido de marcador de posición para el componente personalizado. Tiene la intención de 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.
Ir a alguna parte<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>
Columnas con enlace estirado
Otra instancia de contenido de marcador de posición para este otro componente personalizado. Tiene la intención de 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.
Ir a alguna parte<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>
Identificar el bloque contenedor
Si el enlace extendido no parece funcionar, la causa probablemente sea el bloque que lo contiene . Las siguientes propiedades CSS harán que un elemento sea el bloque contenedor:
- Un
position
valor diferente astatic
- A
transform
operspective
valor distinto denone
- un
will-change
valor detransform
operspective
- Un
filter
valor distinto denone
o unwill-change
valor defilter
(solo funciona en Firefox)
Tarjeta con enlaces estirados
Un texto de ejemplo rápido para construir sobre el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.
El enlace estirado no funcionará aquí, porque position: relative
se agrega al enlace
Este enlace estirado solo se extenderá sobre la p
etiqueta -, porque se le aplica una transformación.
<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>