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. Tanpri sonje kòman CSS positiontravay , .stretched-linkyo pa ka melanje ak pifò eleman tab la.

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

html

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

Pifò konpozan koutim pa gen position: relativepa default, kidonk nou bezwen ajoute .position-relativeisit la yo anpeche lyen an soti nan etann deyò eleman paran an.

Eleman Custom ak lyen lonje

Sa a se kèk kontni anplasman pou eleman nan koutim. Li gen entansyon imite sa kèk kontni mond reyèl la ta sanble, epi nou ap itilize li isit la bay eleman nan yon ti jan nan kò ak gwosè.

Ale yon kote

html

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

Kolòn ak lyen lonje

Yon lòt egzanp kontni anplasman pou lòt eleman koutim sa a. Li gen entansyon imite sa kèk kontni mond reyèl la ta sanble, epi nou ap itilize li isit la bay eleman nan yon ti jan nan kò ak gwosè.

Ale yon kote

html

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

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.

html

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