Enllaç estirat

Feu clic a qualsevol element HTML o component Bootstrap "estirant" un enllaç imbricat mitjançant CSS.

Afegiu .stretched-linka un enllaç per fer clic al seu bloc que conté mitjançant un ::afterpseudoelement. En la majoria dels casos, això vol dir que es pot fer clic en un element position: relative;que conté un enllaç amb la .stretched-linkclasse.

Les targetes tenen position: relativeBootstrap per defecte, de manera que en aquest cas podeu afegir la .stretched-linkclasse amb seguretat a un enllaç de la targeta sense cap altre canvi HTML.

No es recomanen enllaços múltiples i objectius de toc amb enllaços estesos. positionNo obstant això , alguns z-indexestils poden ajudar si això és necessari.

Targeta amb enllaç estirat

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Anar a algun lloc

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

Els objectes multimèdia no tenen position: relativeper defecte, així que hem d'afegir .position-relativeaquí per evitar que l'enllaç s'estingui fora de l'objecte multimèdia.

Mitjans amb enllaç estirat

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.

Anar a algun lloc

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

Les columnes són position: relativeper defecte, de manera que les columnes on es pot fer clic només requereixen la .stretched-linkclasse d'un enllaç. No obstant això, estirar un enllaç sobre un sencer .rowrequereix .position-statica la columna i .position-relativea la fila.

Columnes amb enllaç estirat

Anar a algun lloc

<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ó del bloc que conté

Si sembla que l'enllaç estirat no funciona, el bloc que conté serà la causa. Les següents propietats CSS faran que un element sigui el bloc que conté:

Aposition valor diferent destatic
Atransform o perspectivevalor diferent denone
Awill-change valor de transformoperspective
Un filtervalor diferent noneo un will-changevalor de filter(només funciona a Firefox)

Targeta amb enllaços estirats

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

L'enllaç estirat no funcionarà aquí perquè position: relatives'afegeix a l'enllaç

Aquest enllaç estirat només es repartirà per l' petiqueta -, perquè s'hi aplica una transformació.

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