Ejupi contenido principal-pe Eike docs jeguatahápe
Check
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
html rehegua
<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>

Hetave componente personalizado ndorekói position: relativepor defecto, upévare tekotevẽ ñamoĩ .position-relativeko’ápe ani hag̃ua pe enlace ojepyso elemento túva okaháre.

Generic placeholder image
Componente personalizado orekóva enlace estirado

Kóva ha’e peteĩ contenido tenda’i rehegua componente personalizado-pe g̃uarã. 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
html rehegua
<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>
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
html rehegua
<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>

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.

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