Yakatambanudzwa link

Ita chero chinhu cheHTML kana Bootstrap chikamu chinodzvanywa ne "kutambanudza" chinongedzo nested kuburikidza neCSS.

Wedzera .stretched-linkkune chinongedzo kuti iite iyo ine block inodzvanywa kuburikidza nechinhu ::afterchepseudo. Kazhinji, izvi zvinoreva kuti chinhu position: relative;chine chinongedzo .stretched-linknekirasi chinodzvanywa. Ndokumbira utarise kuti CSS positioninoshanda sei , .stretched-linkhaigone kusanganiswa nezvakawanda zvetafura.

Makadhi ane position: relativenekusarudzika muBootstrap, saka mune iyi kesi unogona kuwedzera zvakachengeteka .stretched-linkkirasi kune chinongedzo mune kadhi pasina imwe shanduko yeHTML.

Multiple links uye tap tap haikurudzirwe ine yakatambanudzwa link. Nekudaro, mamwe positionuye z-indexmasitayera anogona kubatsira kana izvi zvichidikanwa.

Kadhi ine yakatambanudzwa link

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Enda kune imwe nzvimbo

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

Midhiya zvinhu hazvina position: relativenekukasira, saka isu tinofanirwa kuwedzera .position-relativepano kudzivirira chinongedzo kubva kutambanudza kunze kweiyo midhiya chinhu.

Media ine yakatambanudzwa link

Izvi ndezvimwe zvechibatiso chenzvimbo yechinhu chemedia. Izvo zvakagadzirirwa kutevedzera izvo zvimwe zvepasirese zvemukati zvingataridzika, uye isu tiri kuishandisa pano kupa chikamu chikamu chemuviri uye saizi.

Enda kune imwe nzvimbo

<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>This is some placeholder content for the media object. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Makolamu position: relativendeekusarudzika, saka makoramu anodzvanya anongoda .stretched-linkkirasi pane chinongedzo. Nekudaro, kutambanudza chinongedzo pamusoro pese .rowkunoda .position-staticpamutsetse uye .position-relativepamutsetse.

Makoramu ane chinongedzo chakatambanudzwa

Mumwe muenzaniso wenzvimbo yezvibatiso zvechimwe chikamu chetsika. Izvo zvakagadzirirwa kutevedzera izvo zvimwe zvepasirese zvemukati zvingataridzika, uye isu tiri kuishandisa pano kupa chikamu chikamu chemuviri uye saizi.

Enda kune imwe nzvimbo

<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>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Kuziva iyo ine block

Kana iyo yakatambanudzwa link ichiita senge isingashande, iyo ine block ingangove iri chikonzero. Iyo inotevera CSS zvivakwa ichaita chinhu icho chine block:

A positionvalue kunzestatic
A transformkana perspectivekukosha kunze kwenone
A will-changevalue of transformorperspective
Kukosha filterkumwe kunze nonekana will-changekukosha kwe filter(inoshanda chete paFirefox)

Kadhi ine akatambanudzwa links

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Yakatambanudzwa link haishande pano, nekuti position: relativeinowedzerwa kune iyi link

Ichi chinongedzo chakatambanudzwa chinongopararira pamusoro pe- ptag, nekuti shanduko inoshandiswa pairi.

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