Source

Link a inzawm khawm

CSS hmanga nested link “stretch”-in HTML element emaw Bootstrap component emaw eng pawh click theih turin siam rawh.

.stretched-linkLink pakhatah dah la , a containing block::after chu pseudo element hmanga click theih turin a siam ang. A tam zawkah chuan class position: relative;nena link awmna element nei chu click theih a ni tihna a ni..stretched-link

Card te position: relativehian Bootstrap ah default in an nei a, chuvangin hetiang a nih chuan .stretched-linkHTML tihdanglam ngai lovin card chhunga link pakhatah class chu him takin i dah thei ang.

Link tam tak leh tap target te hi stretched link te nen chuan a tha lo. Mahse, thenkhat positionleh z-indexstyle te hian hei hi a tul a nih chuan a pui thei a ni.

Card image cap
Card ah chuan link a inzawm a

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Khawi emaw laiah kal rawh 
<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>

Media object hian default-in an nei lo va , chuvangin media object pawn lama link a inzawm loh nan here hi position: relativekan add a ngai a ni..position-relative

Generic placeholder image
Media leh link stretched tak tak te

Cras thu amet nibh libero, in gravida nulla. A rilru a buai em em a, a rilru a hah em em bawk a. Nulla vel metus scelerisque ante sollicitudin. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. vulputate at, tempus viverra turpis. A rilru a buai em em a, a rilru a hah em em bawk a. vulputate fringilla. Faucibus-ah hian Donec lacinia congue felis a awm a.

Khawi emaw laiah kal rawh 
<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>

Column te position: relativehi default a nih avangin click theih column te .stretched-linkhian link pakhata class chauh a mamawh a ni. Mahse, link pakhat pum pui chunga stretch tur chuan column leh row-ah .rowa ngai a ni..position-static.position-relative

Generic placeholder image
Column te chu stretched link a ni

Cras thu amet nibh libero, in gravida nulla. A rilru a buai em em a, a rilru a hah em em bawk a. Nulla vel metus scelerisque ante sollicitudin. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. vulputate at, tempus viverra turpis. A rilru a buai em em a, a rilru a hah em em bawk a. vulputate fringilla. Faucibus-ah hian Donec lacinia congue felis a awm a.

Khawi emaw laiah kal rawh 
<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>

A chhunga block awmte hriatchhuah

Stretched link hian hna a thawk lo ang tih a hriat chuan containing block hi a chhan a ni ngei ang. A hnuaia CSS property te hian element pakhat chu containing block a siam ang:

  • A positionvalue dang tih loh chustatic
  • A transformemaw perspectivevalue dang emaw tih loh chunone
  • A will-changevalue of transformorperspective
  • filterValue dang emaw value dang noneemaw (Firefox-ah chauh a thawk)will-changefilter
Card image cap
Card ah chuan links stretched a awm

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Stretched link hian hetah hian hna a thawk dawn lo, a chhan position: relativechu link ah hian add a ni

He stretched link hi -tag ah chauh a darh ang p, a chhan chu a chungah transform a apply a ni.

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