Source

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.

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

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

Los objetos de medios no tienen position: relativepor defecto, por lo que debemos agregar .position-relativeaquí para evitar que el enlace se extienda fuera del objeto de medios.

Medios con enlace estirado

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.

Ir a alguna parte

<div class="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media with stretched link</h5>
    <p>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.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Las columnas son position: relativepredeterminadas, por lo que las columnas en las que se puede hacer clic solo requieren la .stretched-linkclase en un enlace. Sin embargo, estirar un enlace sobre un todo .rowrequiere .position-staticen la columna y .position-relativeen la fila.

Columnas con enlace estirado

Ir a alguna parte

<div class="row no-gutters 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 position-static p-4 pl-md-0">
    <h5 class="mt-0">Columns with stretched link</h5>
    <p>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.</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.

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