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

html

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

Zvizhinji zvetsika zvinhu hazvina position: relativenekukasira, saka isu tinofanirwa kuwedzera .position-relativepano kudzivirira chinongedzo kubva kutambanudza kunze kwechinhu chemubereki.

Custom component ine stretched link

Izvi ndezvimwe zvechibatiso chenzvimbo yechikamu chetsika. Izvo zvakaitirwa kutevedzera izvo zvimwe zvepasirese zvemukati zvingataridzika, uye isu tiri kuishandisa pano kupa chikamu chikamu chemuviri uye saizi.

Enda kune imwe nzvimbo

html

<div class="d-flex position-relative">
  <img src="..." class="flex-shrink-0 me-3" alt="...">
  <div>
    <h5 class="mt-0">Custom component with stretched link</h5>
    <p>This is some placeholder content for the 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>

Makoramu ane chinongedzo chakatambanudzwa

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

Enda kune imwe nzvimbo

html

<div class="row g-0 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 p-4 ps-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.

html

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