Enlace estirado

Ima HTML elementotapas utaq Bootstrap componentetapas ñit’inapaq ruway “stretching” huk anidado t’inki CSS kaqnintakama.

.stretched-linkHuk t'inkiman yapay , chaypi kaq bloqueta::after huk pseudo elemento kaqnintakama ñit'inapaq kananpaq . Yaqa llapanpi, kayqa niyta munan huk elemento chaywan position: relative;huk t'inkiyuq .stretched-linkclasewan ñit'inapaq kaqta. Ama hina kaspa, qhaway imayna CSS positionllamk'asqanmanta qusqa , .stretched-linkmana aswan tabla elementokunawan chaqrusqa kanmanchu.

Tarjetakuna position: relativeñawpaqmanta Bootstrap kaqpi kanku, chayrayku kayhina kaqpi mana imamanta manchakuspa .stretched-linkclaseta tarjetapi huk t'inkiman yapayta atikunki mana wak HTML tikraykunawan.

Achka t'inkikuna chaymanta tap metakuna mana llañu t'inkikunawan yuyaychasqachu. Ichaqa wakin positionchaymanta z-indexestilokuna yanapanman sichus kayta mañakunman.

Tarjeta con eslabón estirado

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Maymanpas riy

html nisqapi

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

Yaqa llapan sapanchasqa componentekuna mana position: relativeñawpaqmantachu kanku, chayrayku kaypi yapakunayku .position-relativetiyan mana t'inki tayta elemento hawapi mast'arikunanpaq.

Componente personalizado con enlace estirado

Kayqa wakin tiyanayuq imahina sapanchasqa componentapaq. Chayqa ruwasqa kachkan imayna wakin chiqa pacha contenido rikchakunman chayta qatipanapaq, chaymanta kaypi llamk'achkayku componenteman huk chhika cuerpota chaymanta sayayninta qunaykupaq.

Maymanpas riy

html nisqapi

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

Columnas con eslabón estirado

Huk instancia kay wak sapanchasqa componentapaq tiyanayuq imayna kananmanta. Chayqa ruwasqa kachkan imayna wakin chiqa pacha contenido rikchakunman chayta qatipanapaq, chaymanta kaypi llamk'achkayku componenteman huk chhika cuerpota chaymanta sayayninta qunaykupaq.

Maymanpas riy

html nisqapi

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

Chaypi kaq bloqueta riqsichiy

Sichus llañu t'inki mana llamk'aq hinachu, chay hap'iq bloqueqa ichapas chayrayku kanqa. Kay qatiq CSS propiedades huk elementota ruwanqa chay bloqueta hap'iq:

Huk positionchaniyuq manastatic
A transformutaq perspectivevalor hukmantanone
Huk will-changevalor de transformoperspective
Huk filterchani mana noneutaq huk will-changechani kaqmanta filter(Firefox kaqllapi llamk'an)

Tarjeta con eslabones estirados

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Kaypi llañuchasqa t'inkiqa manam llamk'anqachu, position: relativet'inkiman yapasqa kasqanrayku

Kay llañu t'inkiqa -tag nisqallapim mast'arikunqa, pchayman huk tikray churasqa kasqanrayku.

html nisqapi

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