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 médiaobjektumok alapértelmezés szerint nem rendelkeznek position: relative, ezért ide kell adnunk .position-relative, hogy megakadályozzuk, hogy a hivatkozás a médiaobjektumon kívülre nyúljon.

Nyújtott linkkel ellátott média

Ez a médiaobjektum 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="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>

Az oszlopok position: relativealapértelmezés szerint vannak, így a kattintható oszlopokhoz csak az .stretched-linkosztályra van szükség a hivatkozáson. A hivatkozás teljes egészére való kiterjesztése azonban az oszlopon és a sorban .rowmegköveteli ..position-static.position-relative

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

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 kiterjesztett hivatkozás csak a -tag felett lesz elosztva p, mert transzformációt alkalmaznak 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>