Ligazón estirada

Fai clic en calquera elemento HTML ou compoñente Bootstrap "estirando" unha ligazón aniñada a través de CSS.

Engadir .stretched-linka unha ligazón para facer clic no seu bloque que o contén mediante un ::afterpseudoelemento. Na maioría dos casos, isto significa que se pode facer clic nun elemento position: relative;que contén unha ligazón coa .stretched-linkclase.

As tarxetas teñen position: relativepor defecto Bootstrap, polo que neste caso podes engadir a .stretched-linkclase con seguridade a unha ligazón da tarxeta sen ningún outro cambio de HTML.

Non se recomendan varias ligazóns e obxectivos táctiles con ligazóns estiradas. Non obstante, algúns positione z-indexestilos poden axudar se isto é necesario.

Tarxeta con ligazón estirada

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Vai a algún lado

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

Os obxectos multimedia non teñen position: relativepor defecto, polo que necesitamos engadir .position-relativeaquí para evitar que a ligazón se estenda fóra do obxecto multimedia.

Medios con ligazón estirada

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.

Vai a algún lado

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

As columnas son position: relativepor defecto, polo que as columnas nas que se pode facer clic só requiren a .stretched-linkclase nunha ligazón. Non obstante, estender unha ligazón sobre unha totalidade .rowrequire .position-staticna columna e .position-relativena fila.

Columnas con ligazón estirada

Vai a algún lado

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

Identificación do bloque que contén

Se a ligazón estirada non parece funcionar, probablemente o bloque que o conteña sexa a causa. As seguintes propiedades CSS farán que un elemento sexa o bloque que contén:

Un positionvalor distinto destatic
A transformou perspectivevalor distinto denone
Un will-changevalor de transformouperspective
Un filtervalor que non sexa noneou un will-changevalor de filter(só funciona en Firefox)

Tarxeta con ligazóns estiradas

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

A ligazón estirada non funcionará aquí porque position: relativese engade á ligazón

Esta ligazón estirada só se espallará sobre a petiqueta -, porque se lle aplica unha 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>