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 cum funcționează CSSposition , .stretched-linknu poate fi combinat cu majoritatea elementelor de tabel.

Cardurile au position: relativeîn mod implicit 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.

Linkurile 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

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>

Majoritatea componentelor personalizate nu au position: relativeîn mod implicit, așa că trebuie să adăugăm .position-relativeaici pentru a preveni extinderea linkului în afara elementului părinte.

Componentă personalizată cu legătură întinsă

Acesta este un conținut substituent pentru componenta 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

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>

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

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>

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.

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>