Source

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

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

Cras sit amet nibh libero, 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.

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

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

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

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>