Source

Rabta mġebbda

Agħmel kwalunkwe element HTML jew komponent Bootstrap li jista' jiġi kklikkjat billi "tiġġebbed" link imdaħħla permezz ta' CSS.

Żid .stretched-linkma 'link biex tagħmel il- blokka li fiha tikklikkja permezz ta' ::afterpsewdo element. Fil-biċċa l-kbira tal-każijiet, dan ifisser li element position: relative;li fih rabta mal- .stretched-linkklassi jista' jiġi kklikkjat.

Il -karti għandhom position: relativeawtomatikament f'Bootstrap, għalhekk f'dan il-każ tista 'żżid il- .stretched-linkklassi b'mod sikur ma' link fil-karta mingħajr ebda tibdil HTML ieħor.

Links multipli u miri tal-vit mhumiex rakkomandati b'links stirati. Madankollu, xi positionstili z-indexjistgħu jgħinu jekk dan ikun meħtieġ.

Karta b'rabta mġebbda

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Mur x'imkien

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

L-oġġetti tal-midja m'għandhomx position: relativeawtomatikament, għalhekk għandna bżonn inżidu l- .position-relativehawn biex nipprevjenu li l-link tiġġebbed barra l-oġġett tal-midja.

Midja b'rabta mġebbda

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.

Mur x'imkien

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

Il-kolonni huma position: relativeawtomatikament, għalhekk il-kolonni li jistgħu jiġu kklikkjati jeħtieġu biss il- .stretched-linkklassi fuq link. Madankollu, it-tiġbid ta 'rabta fuq kollu .rowjeħtieġ .position-staticfuq il-kolonna u .position-relativefuq ir-ringiela.

Kolonni b'rabta mġebbda

Mur x'imkien

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

L-identifikazzjoni tal-blokka li fiha

Jekk il-link imġebbda ma jidhirx li jaħdem, il- blokk li jkun fih probabbilment ikun il-kawża. Il-proprjetajiet CSS li ġejjin se jagħmlu element il-blokk li fih:

Valur positiongħajrstatic
A transformjew perspectivevalur għajrnone
Valur will-changeta' transformjewperspective
Valur filterminbarra nonejew will-changevalur ta' filter(jaħdem biss fuq Firefox)

Karta b'links stirati

Xi eżempju ta' test ta' malajr biex jibni fuq it-titlu tal-karta u jagħmel il-biċċa l-kbira tal-kontenut tal-karta.

Link imġebbda mhux se taħdem hawn, għaliex position: relativehija miżjuda mal-link

Din il-link imġebbda se tkun mifruxa biss fuq it- ptag, minħabba li tiġi applikata trasformazzjoni għaliha.

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