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.

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 media chinhu.

Media ine yakatambanudzwa link

Cras sit amet nibh libero, mu 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.

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

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

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

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>