Source

Kgokagano e otlollwago

Dira gore elemente efe goba efe ya HTML goba karolo ya Bootstrap e kgone go kgotla ka go “otlolla” kgokagano yeo e tsentšwego ka gare ga sehlaga ka CSS.

Oketša .stretched-linkgo kgokagano go dira gore boloko ya yona ye e nago le yona e kgotle ka ::afterelemente ya maaka. Maemong a mantši, se se ra gore elemente yeo e nago le position: relative;yeo e nago le kgokagano le .stretched-linksehlopha e a kgotla.

Dikarata di na le position: relativeka go ikemela ka go Bootstrap, ka fao tabeng ye o ka oketša ka polokego .stretched-linksehlopha go kgokagano ka karateng ntle le diphetogo tše dingwe tša HTML.

Dikgokagano tše dintši le diphetho tša go kgotla ga di kgothaletšwe ka dikgokagano tše di otlollwago. Lega go le bjalo, tše dingwe positionle z-indexmekgwa di ka thuša ge e ba se se ka nyakega.

Card le otlolla kgokahanyo

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Eya felotsoko

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

Dilo tša boraditaba ga di na position: relativeka go ikemela, ka fao re swanetše go oketša .position-relativemo go thibela kgokagano go otlolla ka ntle ga selo sa boraditaba.

Media le otlolla kgokahanyo

Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le sehloohong. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša pelego. Donec lacinia congue felis ka faucibus.

Eya felotsoko

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

Dikholomo ke position: relativeka go ikemela, ka fao dikholomo te di ka klikwago di nyaka fela .stretched-linksehlopha go kgokagano. Lega go le bjalo, go otlolla kgokagano godimo ga selo ka moka .rowgo nyaka .position-staticgodimo ga kholomo le .position-relativemothalong.

Dikholomo tše di nago le kgokagano ye e otlollwago

Eya felotsoko

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

Go hlaola boloko yeo e nago le yona

Ge e ba kgokagano yeo e otlollwago e bonala e sa šome, mohlomongwe boloko yeo e nago le yona e tla ba sebaki. Dithoto tše di latelago tša CSS di tla dira gore elemente e be boloko bjo bo nago le:

Boleng positionbjo bongwe ntle lestatic
A transformgoba perspectiveboleng bjo bongwe ntle lenone
Boleng will-changebja transformgobaperspective
Boleng filterbjo bongwe ntle le nonegoba will-changeboleng bja filter(bo šoma fela go Firefox) .

Card le dikgokelo otlolla

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Otlolla kgokagano e ke ke ya sebetsa mona, hobane position: relativee eketswa ho kgokagano

Kgokagano ye e otlollwago e tla phatlalatšwa fela godimo ga p-tag, ka gobane phetogo e dirišwa go yona.

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