Source

Enlace estirado rehegua

Ejapo oimeraẽva elemento HTML térã componente Bootstrap rehegua ojejapo hag̃ua clic “eestira” rupi peteĩ enlace anidado CSS rupive.

Oñemoĩ .stretched-linkpeteĩ enlace-pe ojejapo hag̃ua ibloque oguerekóva clic peteĩ ::afterelemento seudo rupive. Hetavéramo, kóva heꞌise peteĩ elemento orekóva position: relative;upe oguerekóva peteĩ joajuha .stretched-linkmboꞌepy ndive ikatuha ojejapo clic.

Umi tarjeta oguereko position: relativepor defecto Bootstrap-pe, upévare ko kásope ikatu emoĩ kyre’ỹme pe .stretched-linkmbo’esyry peteĩ joajuha tarjeta-pe mba’eveichagua ambue HTML ñemoambue’ỹre.

Heta enlace ha umi blanco tap noñemoñe’ẽi umi enlace ojeestiráva reheve. Ha katu, oĩ positionha z-indexestilo ikatúva oipytyvõ oñeikotevẽramo kóva.

Tarjeta orekóva eslabón estirado

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Tereho peteĩ hendápe

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

Umi mbaꞌekuaarã medio rehegua ndoguerekói position: relativepor defecto, upévare tekotevẽ ñamoĩ .position-relativekoꞌape ani hag̃ua pe joajuha ojepyso pe mbaꞌekuaarã okaháre.

Medios de comunicación orekóva enlace estirado

Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante solicitudin rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua. Fusce condimentum nunc ac nisi fringilla vulputada rehegua. Donec lacinia congue felis rehegua faucibus-pe.

Tereho peteĩ hendápe

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

Umi vore haꞌehína position: relativepor defecto, upévare umi vore ojepysóva oikotevẽ .stretched-linkmboꞌepy peteĩ enlace-pe añoite. Ha katu, ojeestira hagua petet enlace petet entero ári .rowtekoteve .position-staticpe columna ha .position-relativefila rehe.

Umi columna orekóva eslabón estirado

Tereho peteĩ hendápe

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

Ojekuaa hagua pe bloque oguerekóva

Pe enlace ojeestiráva ha’etéramo nomba’apóiva, pe bloque oguerekóva oiméne ha’éta pe káusa. Ko’ã CSS mba’ekuaarã ojapóta peteĩ elemento-gui pe bloque oguerekóva:

Peteĩ positionvalor ndaha’éivastatic
A transformtérã perspectivevalor ndaha’éivanone
Peteĩ will-changemba’ekuaarã transformtérãperspective
Peteĩ filtermba’ekuaarã ndaha’éiva nonetérã peteĩ will-changemba’ekuaarã filter(omba’apo Firefox-pe añoite) .

Tarjeta orekóva eslabones estirados

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Enlace estirado nomba’apói ko’ápe, position: relativeoñembojoapýgui enlace-pe

Ko joajuha ojepysóva oñemyasãita p-tag ári añoite, ojejapógui hese peteĩ ñemoambue.

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