in English

Enlace estirado rehegua

Ejapo oimeraẽva elemento HTML térã componente Bootstrap rehegua ojejapokuaa hag̃ua clic “eipysóvo” 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. Eñatendéke oñeme’ẽvo mba’éichapa omba’apo CSSposition , .stretched-linkndaikatúi oñembojehe’a hetavéva elemento tabla rehegua ndive.

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.

Card image cap
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.

Generic placeholder image
Medios de comunicación orekóva enlace estirado

Kóva haꞌehína peteĩ mbaꞌekuaarã tenda rehegua mbaꞌekuaarã medio rehegua. Oñeha’ã oimitá mba’éichapa ojehechava’erãmo’ã peteĩ contenido mundo real-pegua, ha roipuru hína ko’ápe rome’ẽ hag̃ua componente-pe peteĩ hete ha tuichakue michĩmi.

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>This is some placeholder content for the media object. 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>

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.

Generic placeholder image
Umi columna orekóva eslabón estirado

Ambue instancia contenido tenda’i rehegua ko ambue componente jeporupyre rehegua. Oñeha’ã oimitá mba’éichapa ojehechava’erãmo’ã peteĩ contenido mundo real-pegua, ha roipuru hína ko’ápe rome’ẽ hag̃ua componente-pe peteĩ hete ha tuichakue michĩmi.

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

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) .
Card image cap
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>