Izstiepta saite

Padariet jebkuru HTML elementu vai Bootstrap komponentu klikšķināmu, “izstiepjot” ligzdotu saiti, izmantojot CSS.

Pievienojiet .stretched-linksaitei, lai padarītu to saturošo bloku klikšķināmu, izmantojot ::afterpseidoelementu. Vairumā gadījumu tas nozīmē, ka elements ar position: relative;saiti uz .stretched-linkklasi ir noklikšķināms.

Kartēm position: relativepēc noklusējuma ir Bootstrap, tāpēc šajā gadījumā varat droši pievienot .stretched-linkklasi saitei kartē bez citām HTML izmaiņām.

Ar izstieptām saitēm nav ieteicamas vairākas saites un pieskaršanās mērķi. Tomēr daži positionun z-indexstili var palīdzēt, ja tas ir nepieciešams.

Karte ar izstieptu saiti

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Aizej kaut kur

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

Multivides objektiem position: relativepēc noklusējuma nav, tāpēc mums ir jāpievieno .position-relativešeit, lai novērstu saites izstiepšanos ārpus multivides objekta.

Media ar izstieptu saiti

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.

Aizej kaut kur

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

Kolonnas ir position: relativepēc noklusējuma, tāpēc noklikšķināmām kolonnām ir nepieciešama tikai .stretched-linkklase saitē. Tomēr, lai izstieptu saiti visā .rowkolonnā .position-staticun .position-relativerindā.

Kolonnas ar izstieptu saiti

Aizej kaut kur

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

Saturošā bloka identificēšana

Ja šķiet, ka izstieptā saite nedarbojas, iespējams, iemesls būs saturošais bloks . Tālāk norādītie CSS rekvizīti padarīs elementu par saturošu bloku:

positionVērtība, kas navstatic
A transformvai perspectivevērtība, kas navnone
will-changeVērtība transformvai _perspective
Vērtība , filterkas nav nonevai will-changevērtība filter(darbojas tikai pārlūkprogrammā Firefox)

Karte ar izstieptām saitēm

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Izstiepta saite šeit nedarbosies, jo position: relativeir pievienota saitei

Šī izstieptā saite tiks izplatīta tikai pa ptagu -, jo tai tiek piemērota transformācija.

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