Njikọ gbatịrị agbatị

Mee ihe ọ bụla HTML ma ọ bụ akụrụngwa Bootstrap pịa site na “ịgbatị” njikọ akwụghị ụgwọ site na CSS.

Tinye .stretched-linkna njikọ iji mee ka ngọngọ nwere ike pịa ya site na ihe ::afterpseudo. N'ọtụtụ ọnọdụ, nke a pụtara na mmewere position: relative;nwere njikọ nwere njikọ na .stretched-linkklaasị nwere ike ịpị.

Kaadị nwere position: relativendabara na Bootstrap, yabụ na nke a ị nwere ike itinye .stretched-linkklas ahụ na njikọ dị na kaadị ahụ n'enweghị mgbanwe HTML ọ bụla.

Ejighị njikọ gbatịa akwadoro ọtụtụ njikọ na ebumnuche mgbata. Agbanyeghị, ụfọdụ positionna z-indexụdị nwere ike inye aka ma ọ bụrụ na achọrọ nke a.

Kaadị nwere njikọ agbatị

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

Gaa ebe

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

Ihe mgbasa ozi enweghị position: relativendabara, yabụ anyị kwesịrị ịgbakwunye ebe .position-relativea iji gbochie njikọ ahụ ịgbatị n'èzí ihe mgbasa ozi.

Mgbasa ozi nwere njikọ agbatị

Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis na faucibus.

Gaa ebe

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

Ogidi bụ position: relativena ndabara, yabụ kọlụm nwere ike pịa chọrọ naanị .stretched-linkklas na njikọ. Otú ọ dị, ịgbatị njikọ n'elu dum .rowchọrọ .position-staticna kọlụm na .position-relativen'ahịrị.

Ogidi nwere njikọ agbatị

Gaa ebe

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

Ịmata ngọngọ nwere

Ọ bụrụ na njikọ agbatị adịghị ka ọ na-arụ ọrụ, ngọngọ nwere nwere ike ịbụ ihe kpatara ya. Njirimara CSS ndị a ga-eme ka mmewere bụrụ ngọngọ nwere:

Uru positionọzọ karịastatic
A transformma ọ bụ perspectiveuru ọzọ karịanone
Uru will-changenke transformma ọ bụperspective
Uru filterọzọ karịa nonema ọ bụ will-changeuru nke filter(naanị na-arụ ọrụ na Firefox)

Kaadị nwere njikọ agbatị

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

Njikọ gbatịrị agbatị agaghị arụ ọrụ ebe a, n'ihi position: relativena agbakwunyere na njikọ ahụ

A ga-agbasa njikọ a gbatịpụrụp naanị na -tag, n'ihi na a na-etinye mgbanwe na ya.

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