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. Vă rugăm să rețineți, dat fiind cum funcționează CSSposition , .stretched-linknu poate fi combinat cu majoritatea elementelor de tabel.

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

Acesta este un conținut substituent pentru obiectul media. Este destinat să imite cum ar arăta un conținut din lumea reală și îl folosim aici pentru a oferi componentei un pic de corp și dimensiune.

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>This is some placeholder content for the media object. 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>

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

O altă instanță de conținut substituent pentru această altă componentă personalizată. Este destinat să imite cum ar arăta un conținut din lumea reală și îl folosim aici pentru a oferi componentei un pic de corp și dimensiune.

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

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>