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. Tingueu en compte com funciona CSSposition , .stretched-linkno es pot combinar amb la majoria dels elements de la taula.

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. Tanmateix, alguns positioni 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

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 majoria de components personalitzats no tenen position: relativeper defecte, així que hem d'afegir .position-relativeaquí per evitar que l'enllaç s'estingui fora de l'element principal.

Component personalitzat amb enllaç estirat

Aquest és un contingut de marcador de posició per al component personalitzat. Té la intenció d'imitar el que semblaria algun contingut del món real, i aquí l'estem utilitzant per donar-li una mica de cos i mida al component.

Anar a algun lloc

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>

Columnes amb enllaç estirat

Una altra instància de contingut de marcador de posició per a aquest altre component personalitzat. Té la intenció d'imitar el que semblaria algun contingut del món real, i aquí l'estem utilitzant per donar-li una mica de cos i mida al component.

Anar a algun lloc

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>

Identificació del bloc que conté

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

Un positionvalor diferent destatic
A transformo perspectivevalor diferent denone
Un will-changevalor 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ó.

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>