Enlace estirado

Haz que se pueda hacer clic en cualquier elemento HTML o componente Bootstrap "estirando" un enlace anidado a través de CSS.

😎 Esta traducción es parte del proyecto esdocu.com.

Agrega .stretched-link a un enlace para que sea bloque contenedor 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), .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.

Tarjeta con enlace estirado

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Ve a algún lado

html

<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 de forma predeterminada, por lo que debemos agregar .position-relative aquí para evitar que el enlace se extienda fuera del elemento padre.

Componente personalizado con enlace estirado

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.

Ve a algún lado

html

<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. 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.

Ve a algún lado

html

<div class="row g-0 bg-body-secondary 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, el bloque contenedor probablemente será la causa. Las siguientes propiedades CSS convertirán a un elemento en el bloque contenedor:

Un valor de position distinto de static
Un valor de transform o perspective distinto de none
Un valor will-change de transform o perspective
Un valor de filter distinto de none o un valor will-change de filter (sólo funciona en Firefox)

Tarjeta con enlaces estirados

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

El enlace extendido no funcionará aquí, porque position: relative se agrega al enlace

Este enlace extendido solo se distribuirá en la etiqueta p, porque se le aplica una transformación.

html

<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-body-tertiary" 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>