Link we dɛn dɔn strɛch

Mek ɛni HTML ɛlimɛnt ɔ Bootstrap kɔmpɔnɛnt we yu kin klik bay we yu “stretch” wan nest link tru CSS.

Ad .stretched-linkto wan link fɔ mek in kɔntinɛnt blɔk ebul fɔ klik tru wan ::afterpseudo ɛlimɛnt. Bɔku tɛm, dis min se wan ɛlimɛnt wit position: relative;we gɛt link wit di .stretched-linkklas kin klik.

Kad dɛn gɛt position: relativebay difɔlt na Bootstrap, so insay dis kes yu kin ad di .stretched-linkklas sef wan to wan link na di kad we nɔ gɛt ɛni ɔda chenj na HTML.

Bɔku link ɛn tap target dɛn nɔ kin advays wit strɛch link dɛn. Bɔt sɔm positionɛn z-indexstayl dɛn kin ɛp if dɛn nid fɔ du dis.

Kad wit stret link

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Go sɔmsay

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

Midia ɔbjɛkt dɛn nɔ gɛt position: relativebay difɔlt, so wi nid fɔ ad di .position-relativeya fɔ mek di link nɔ strɛch ausayd di midia ɔbjɛkt.

Midya wit strɛch link

Kras sidon amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solisitudin. Kras purus odio, vestibulum in vulputate na, tempus viverra turpis. Fusce kondimɛnt nunc ac nisi vulputate fringila. Donec lacinia congue felis na di faucibus.

Go sɔmsay

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

Kɔlɔm dɛn na position: relativebay difɔlt, so kɔlɔm dɛn we yu kin klik jɔs nid di .stretched-linkklas na wan link. Bɔt fɔ strɛch wan link oba wan ol wan .rownid fɔ .position-staticde na di kɔlɔm ɛn .position-relativena di row.

Kɔlɔm dɛn we gɛt strɛch link

Go sɔmsay

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

Fɔ no di blɔk we de insay

If i tan lɛk se di link we dɛn strɛch nɔ de wok, i go mɔs bi se di blɔk we de insay go bi di rizin. Di CSS prɔpati dɛn we de dɔŋ ya go mek wan ɛlimɛnt bi di blɔk we de insay:

Wan positionvalyu we nɔtostatic
A transformɔ perspectivevalyu ɔda wan pasnone
Wan will-changevalyu fɔ transformɔperspective
Wan filtervalyu we nɔto noneɔ wan will-changevalyu fɔ filter(na Fayafaks nɔmɔ de wok)

Kad wit link dɛn we dɛn strɛch

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Stretched link nɔ go wok ya, bikɔs position: relativedɛn ad am to di link

Dis strɛch link go jɔs spred oba di p-tag, bikɔs dɛn dɔn aplay wan transfɔm to am.

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