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-link
go kgokagano go dira gore boloko ya yona ye e nago le yona e kgotle ka ::after
elemente ya maaka. Maemong a mantši, se se ra gore elemente yeo e nago le position: relative;
yeo e nago le kgokagano le .stretched-link
sehlopha e a kgotla. Hle ela hloko ge go filwe ka fao CSS position
e šomago ka gona , .stretched-link
e ka se hlakantšhwa le bontši bja dielemente tša tafola.
Dikarata di na le position: relative
ka go ikemela ka go Bootstrap, ka fao tabeng ye o ka oketša ka polokego .stretched-link
sehlopha 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 position
le z-index
mekgwa 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: relative
ka go ikemela, ka fao re swanetše go oketša .position-relative
mo 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
position
bjo bongwe ntle lestatic
- A
transform
gobaperspective
boleng bjo bongwe ntle lenone
- Boleng
will-change
bjatransform
gobaperspective
- Boleng
filter
bjo bongwe ntle lenone
gobawill-change
boleng bjafilter
(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: relative
e 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>