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. Svp yeba soki bapesi ndenge CSS positionesalaka , .stretched-linkekoki kosangisama te na ba éléments mingi ya tableau.

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

html

<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 composants personnalisés mingi ezalaka na position: relativepar défaut te, yango wana esengeli tobakisa .position-relativeawa pona kopekisa lien e se étirer libanda ya élément parent.

Composant personnalisé na lien étiré

Oyo ezali mwa makambo ya esika ya kofanda mpo na eteni ya momesano. Ezali na mokano ya komekola oyo mwa makambo ya mokili ya solosolo ekozala lokola, mpe tozali kosalela yango awa mpo na kopesa eteni yango mwa nzoto mpe bonene.

Kende esika moko boye

html

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

Makonzí oyo ezali na lien oyo etandami

Instance mosusu ya contenus ya placeholder pona composant oyo mosusu ya personnalisé. Ezali na mokano ya komekola oyo mwa makambo ya mokili ya solosolo ekozala lokola, mpe tozali kosalela yango awa mpo na kopesa eteni yango mwa nzoto mpe bonene.

Kende esika moko boye

html

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

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.

html

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