Legătură întinsă

Faceți clic pe orice element HTML sau componentă Bootstrap prin „întinderea” unui link imbricat prin CSS.

Adăugați .stretched-linkla un link pentru a face clic pe blocul care îl conține::after printr-un pseudo element. În cele mai multe cazuri, aceasta înseamnă că un element cu position: relative;care conține o legătură cu .stretched-linkclasa este pe care se poate face clic.

Cardurile au position: relativeîn mod implicit în Bootstrap, așa că în acest caz puteți adăuga în siguranță .stretched-linkclasa la un link din card fără alte modificări HTML.

Link-urile multiple și țintele de atingere nu sunt recomandate în cazul linkurilor extinse. Cu toate acestea, unele positionși z-indexstiluri pot ajuta dacă acest lucru este necesar.

Card cu link întins

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Mergi undeva

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

Obiectele media nu au position: relativeîn mod implicit, așa că trebuie să adăugăm .position-relativeaici pentru a preveni extinderea linkului în afara obiectului media.

Media cu link întins

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.

Mergi undeva

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

Coloanele sunt position: relativeimplicite, așa că coloanele pe care se poate face clic necesită doar .stretched-linkclasa de pe un link. Cu toate acestea, extinderea unei legături pe un întreg .rownecesită .position-staticpe coloană și .position-relativepe rând.

Coloane cu link întins

Mergi undeva

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

Identificarea blocului care conține

Dacă legătura întinsă nu pare să funcționeze, blocul care îl conține va fi probabil cauza. Următoarele proprietăți CSS vor face dintr-un element blocul care îl conține:

O positionaltă valoare decâtstatic
A transformsau perspectivealtă valoare decâtnone
O will-changevaloare a transformsauperspective
O filteraltă valoare decât nonesau o will-changevaloare a filter(funcționează numai pe Firefox)

Card cu legături întinse

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Linkul extins nu va funcționa aici, deoarece position: relativeeste adăugat la link

Această legătură întinsă va fi răspândită numai peste peticheta -, deoarece i se aplică o transformare.

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