Naka-stretch na link

Gawing naki-click ang anumang elemento ng HTML o bahagi ng Bootstrap sa pamamagitan ng "pag-unat" ng isang nested na link sa pamamagitan ng CSS.

Idagdag .stretched-linksa isang link upang gawing naki-click ang naglalaman ng block nito sa pamamagitan ng ::afterpseudo element. Sa karamihan ng mga kaso, nangangahulugan ito na ang isang elemento position: relative;na naglalaman ng isang link na may .stretched-linkklase ay naki-click. Pakitandaan kung paano gumagana ang CSSposition , .stretched-linkhindi maaaring ihalo sa karamihan ng mga elemento ng talahanayan.

Ang mga card ay may position: relativedefault sa Bootstrap, kaya sa kasong ito maaari mong ligtas na idagdag ang .stretched-linkklase sa isang link sa card nang walang anumang mga pagbabago sa HTML.

Hindi inirerekomenda ang maraming link at i-tap ang mga target na may mga naka-stretch na link. Gayunpaman, maaaring makatulong ang ilan positionat mga z-indexistilo kung kinakailangan ito.

Card na may nakaunat na link

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Pumunta sa isang lugar

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

Karamihan sa mga custom na bahagi ay walang position: relativebilang default, kaya kailangan naming idagdag ang .position-relativedito upang maiwasan ang pag-abot ng link sa labas ng pangunahing elemento.

Custom na bahagi na may naka-stretch na link

Ito ay ilang placeholder na nilalaman para sa custom na bahagi. Ito ay nilayon upang gayahin kung ano ang magiging hitsura ng ilang nilalaman sa totoong mundo, at ginagamit namin ito dito upang bigyan ang bahagi ng kaunting katawan at laki.

Pumunta sa isang lugar

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

Mga column na may naka-stretch na link

Isa pang halimbawa ng nilalaman ng placeholder para sa iba pang custom na bahagi na ito. Ito ay nilayon upang gayahin kung ano ang magiging hitsura ng ilang nilalaman sa totoong mundo, at ginagamit namin ito dito upang bigyan ang bahagi ng kaunting katawan at laki.

Pumunta sa isang lugar

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

Pagkilala sa naglalaman ng bloke

Kung ang nakaunat na link ay tila hindi gumagana, ang naglalaman ng bloke ay malamang na ang dahilan. Ang mga sumusunod na katangian ng CSS ay gagawa ng isang elemento na naglalaman ng bloke:

Isang positionhalaga maliban sastatic
A transformo perspectivehalaga maliban sanone
Isang will-changehalaga ng transformoperspective
Isang filterhalaga maliban sa noneo isang will-changehalaga ng filter(gumagana lamang sa Firefox)

Card na may mga naka-stretch na link

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Ang naka-stretch na link ay hindi gagana dito, dahil position: relativeidinagdag ito sa link

Ikakalat lang ang naka- stretch na linkp na ito sa -tag, dahil may inilapat na pagbabago rito.

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