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-linka un enlace para hacer que se pueda hacer clic en su bloque contenedor a través de un ::afterpseudo 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-linkclase. Tenga en cuenta que dado cómo funciona CSSposition , .stretched-linkno se puede mezclar con la mayoría de los elementos de la tabla.

Las tarjetas tienen position: relativeBootstrap de forma predeterminada, por lo que en este caso puede agregar la .stretched-linkclase 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. positionSin embargo , algunos z-indexestilos 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

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: relativepor defecto, por lo que debemos agregar .position-relativeaquí 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

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

html

<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 positionvalor diferente astatic
A transformo perspectivevalor distinto denone
un will-changevalor de transformoperspective
Un filtervalor distinto de noneo un will-changevalor de filter(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: relativese agrega al enlace

Este enlace estirado solo se extenderá sobre la petiqueta -, 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-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>