Nyújtott link

Tegye bármelyik HTML-elemet vagy Bootstrap-komponenst kattinthatóvá egy beágyazott hivatkozás CSS-en keresztüli „kinyújtásával”.

Adjon .stretched-linkhozzá egy hivatkozást, hogy azt tartalmazó blokkot::after pszeudoelemen keresztül kattinthatóvá tegye. A legtöbb esetben ez azt jelenti, hogy position: relative;az osztályra mutató hivatkozást tartalmazó elem .stretched-linkkattintható. Kérjük, vegye figyelembe, hogy a CSS hogyan positionműködik , .stretched-linknem keverhető a legtöbb táblázat elemmel.

A kártyák position: relativealapértelmezés szerint a Bootstrapben vannak, így ebben az esetben nyugodtan hozzáadhatja az .stretched-linkosztályt a kártyán lévő hivatkozáshoz, minden egyéb HTML-módosítás nélkül.

Nyújtott hivatkozások esetén nem javasolt több hivatkozás és koppintási cél. Néhány positionés z-indexstílus azonban segíthet, ha erre szükség van.

Kártya feszített linkkel

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Elmenni valahova

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

A legtöbb egyéni komponens alapértelmezés szerint nem rendelkezik position: relative, ezért ide kell hozzáadnunk .position-relative, hogy megakadályozzuk, hogy a hivatkozás a szülőelemen kívülre nyúljon.

Egyedi alkatrész feszített linkkel

Ez az egyéni összetevő néhány helyőrző tartalma. Célja, hogy utánozza, hogyan nézne ki néhány valós tartalom, és itt azt használjuk, hogy egy kicsit testet és méretet adjunk az összetevőnek.

Elmenni valahova

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

Oszlopok feszített linkkel

Helyőrző tartalom egy másik példánya ehhez a másik egyéni összetevőhöz. Célja, hogy utánozza, hogyan nézne ki néhány valós tartalom, és itt azt használjuk, hogy egy kicsit testet és méretet adjunk az összetevőnek.

Elmenni valahova

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

A tartalmazó blokk azonosítása

Ha úgy tűnik, hogy a megfeszített hivatkozás nem működik, valószínűleg a tartalmazó blokk lesz az oka. A következő CSS-tulajdonságok teszik az elemet tartalmazó blokkot:

Más positionérték, mintstatic
A transformvagy perspectivemás érték, mintnone
A vagy will-changeértéketransformperspective
Más filterérték nonevagy will-changeérték filter(csak Firefoxon működik)

Kártya feszített linkekkel

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

A nyújtott hivatkozás itt nem fog működni, mert position: relativehozzáadva van a hivatkozáshoz

Ez a kinyújtott hivatkozás csak a -tag felett lesz elosztva p, mert transzformáció kerül rá.

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