Esteka luzatua

Egin klik edozein HTML elementu edo Bootstrap osagai CSS bidez habiatutako esteka bat "luzatuz".

Gehitu .stretched-linkesteka bati bere blokea::after sasi elementu baten bidez klikagarria izan dadin. Kasu gehienetan, horrek esan nahi position: relative;du klasearekiko esteka duen elementu bat .stretched-linkklikagarria dela.

Txartelek position: relativelehenespenez Bootstrap-en dute, beraz, kasu honetan .stretched-link, txarteleko esteka batean klasea segurtasunez gehi dezakezu beste HTML aldaketarik gabe.

Hainbat esteka eta ukipen-helburuak ez dira gomendatzen esteka luzatuekin. Hala ere, batzuk positioneta z-indexestiloek hori behar izanez gero lagun dezakete.

Esteka luzatua duen txartela

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Zoaz nonbait

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

Media-objektuek ez dute position: relativelehenespenez, beraz, .position-relativehemen gehitu behar dugu esteka multimedia-objektutik kanpo luzatzea saihesteko.

Esteka luzatua duten euskarriak

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.

Zoaz nonbait

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

Zutabeak position: relativelehenespenez dira, beraz, klika daitezkeen zutabeek .stretched-linkesteka bateko klasea soilik behar dute. Hala ere, esteka oso batean luzatzea zutabean eta errenkadan .rowbehar da..position-static.position-relative

Esteka luzatua duten zutabeak

Zoaz nonbait

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

Bloke edukitzailea identifikatzea

Luzatutako estekak ez duela funtzionatzen badirudi, edukiko duen blokea izango da ziurrenik kausa. CSS propietate hauek elementu bat edukiko duen blokea bihurtuko dute:

Beste positionbalio batstatic
A transformedo perspectivebeste balioanone
edo will-changebalio battransformperspective
Balio bat edo beste filterbalio bat (Firefox-en bakarrik funtzionatzen du)nonewill-changefilter

Esteka luzatuekin txartela

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Esteka luzatuak ez du funtzionatuko hemen, position: relativeestekan gehitzen delako

Hedatutako esteka hau -etiketan baino ez da pzabalduko, transformazio bat aplikatzen zaiolako.

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