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. Hle ela hloko ge go filwe ka fao CSS positione šomago ka gona , .stretched-linke ka se hlakantšhwa le bontši bja dielemente tša tafola.

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>

Bontši bja dikarolo tša tlwaelo 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 elemente ya motswadi.

Custom karolo le otlolla kgokahanyo

Ye ke diteng tše dingwe tša seswaro sa lefelo sa karolo ya tlwaelo. E reretšwe go ekiša seo diteng tše dingwe tša lefase la nnete di bego di tla lebelega bjang, gomme re di šomiša mo go fa karolo go se nene ga mmele le bogolo.

Eya felotsoko

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

Dikholomo tše di nago le kgokagano ye e otlollwago

Mohlala o mongwe wa diteng tša seswari sa lefelo bakeng sa karolo ye e nngwe ya tlwaelo. E reretšwe go ekiša seo diteng tše dingwe tša lefase la nnete di bego di tla lebelega bjang, gomme re di šomiša mo go fa karolo go se nene ga mmele le bogolo.

Eya felotsoko

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

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.

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

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>