Lien oyo etandami

Sala que élément HTML to composant ya Bootstrap nionso ekoki ko cliquer na “stretching” lien encastré na nzela ya CSS.

Bakisa .stretched-linkna lien moko mpo na kosala ete bloc na yango oyo ezali na kati ezala clicable na nzela ya ::afterpseudo élément. Mbala mingi, yango elakisi ete élément moko oyo ezali na position: relative;oyo ezali na lien oyo ezali na .stretched-linkkelasi ezali oyo ekoki kofina.

Ba cartes bazali position: relativena par défaut na Bootstrap, donc na cas oyo okoki kobakisa .stretched-linkclasse sans danger na lien moko na carte sans changement mosusu ya HTML.

Ba liens ebele na ba cibles ya tap ezali recommandé te na ba liens étirés. Kasi, mosusu positionmpe z-indexmitindo ekoki kosalisa soki yango esɛngami.

Carte na lien étiré

Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.

Kende esika moko boye

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

Ba objets ya média ezalaka na position: relativepar défaut te, yango wana esengeli tobakisa .position-relativeawa pona kopekisa lien etandama libanda ya objet ya média.

Media na lien etandami

Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.

Kende esika moko boye

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

Ba colonnes ezali position: relativepar défaut, yango wana ba colonnes oyo ekoki ko cliquer esengaka kaka .stretched-linkclasse na lien moko. Kasi, kotanda lien moko likoló ya mobimba .rowesɛngaka .position-staticna likoló mpe .position-relativena molɔngɔ.

Makonzí oyo ezali na lien oyo etandami

Kende esika moko boye

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

Koyeba bloc oyo ezali na kati

Soki lien oyo etandami emonani lokola ezali kosala te, bloc oyo ezali na yango ekozala mbala mosusu ntina. Ba propriétés ya CSS oyo elandi ekosala que élément ezala bloc oyo ezali na kati:

Motuya positionmosusu oyo ezali testatic
A transformto perspectivemotuya mosusu oyo ezali tenone
will-changeMotuya moko ya transformtoperspective
Motuya filtermosusu longola se noneto will-changemotuya ya filter(esalaka kaka na Firefox)

Carte na ba liens étirés

Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.

Lien étirée ekosala awa te, po position: relativeebakisami na lien

Lien oyo etandami ekopanzana kaka likolo ya p-tag, po transformation esalemi na yango.

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