Lyen lonje

Fè nenpòt eleman HTML oswa eleman Bootstrap klike sou "etann" yon lyen enbrike atravè CSS.

Ajoute .stretched-linknan yon lyen pou fè blòk ki genyen li yo klike sou yon ::afterpseudo eleman. Nan pifò ka yo, sa vle di ke yon eleman position: relative;ki gen yon lyen ak .stretched-linkklas la se klike sou.

Kat gen position: relativepa default nan Bootstrap, kidonk nan ka sa a ou ka san danje ajoute .stretched-linkklas la nan yon lyen nan kat la san okenn lòt chanjman HTML.

Plizyè lyen ak sib tiyo yo pa rekòmande ak lyen lonje. Sepandan, kèk positionak z-indexestil ka ede ta dwe sa mande.

Kat ak lyen lonje

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Ale yon kote

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

Objè medya yo pa genyen position: relativepa default, kidonk nou bezwen ajoute .position-relativeisit la yo anpeche lyen an soti nan etann deyò objè a medya.

Medya ak lyen lonje

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

Ale yon kote

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

Kolòn yo se position: relativepa default, kidonk kolòn klike sou sèlman mande pou .stretched-linkklas la sou yon lyen. Sepandan, etann yon lyen sou yon antye .rowmande .position-staticsou kolòn nan ak .position-relativesou ranje a.

Kolòn ak lyen lonje

Ale yon kote

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

Idantifye blòk ki genyen an

Si lyen an lonje pa sanble yo travay, blòk ki genyen an ap pwobableman se kòz la. Pwopriyete CSS sa yo pral fè yon eleman blòk ki genyen ladan l la:

Yon positionvalè lòt pasestatic
A transformoswa perspectivevalè lòt pasenone
Yon will-changevalè de transformoswaperspective
Yon filtervalè ki pa noneoswa yon will-changevalè filter(sèlman travay sou Firefox)

Kat ak lyen lonje

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Lyen lonje pa pral travay isit la, paske position: relativese ajoute nan lyen an

Lyen lonje sa a pral sèlman gaye sou p-tag la, paske yo aplike yon transfòmasyon sou li.

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