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.

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>

Ang mga bagay sa media ay walang bilang position: relativedefault, kaya kailangan nating idagdag ang .position-relativedito upang maiwasan ang pag-uunat ng link sa labas ng bagay ng media.

Media na may nakaunat na link

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 sa faucibus.

Pumunta sa isang lugar

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

Bilang position: relativedefault ang mga column, kaya kailangan lang ng mga naki-click na column ang .stretched-linkklase sa isang link. Gayunpaman, ang pag-stretch ng isang link sa kabuuan ay .rownangangailangan .position-staticsa column at .position-relativesa row.

Mga column na may naka-stretch na link

Pumunta sa isang lugar

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

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>