in English
Arnofio
Toglo fflotiau ar unrhyw elfen, ar draws unrhyw dorbwynt, gan ddefnyddio ein cyfleustodau arnofio ymatebol.
Ar y dudalen hon
Trosolwg
Mae'r dosbarthiadau cyfleustodau hyn yn arnofio elfen i'r chwith neu'r dde, neu'n analluogi arnofio, yn seiliedig ar faint presennol y porth gwylio gan ddefnyddio'r eiddo CSSfloat
. !important
yn cael ei gynnwys er mwyn osgoi materion penodoldeb. Mae'r rhain yn defnyddio'r un torbwyntiau golygfan â'n system grid. Sylwch nad yw cyfleustodau arnofio yn cael unrhyw effaith ar eitemau hyblyg.
Cychwyn arnofio ar bob maint porth gwylio
Diwedd arnofio ar bob maint porth gwylio
Peidiwch ag arnofio ar bob maint golygfan
<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>
Ymatebol
Mae amrywiadau ymatebol hefyd yn bodoli ar gyfer pob float
gwerth.
Cychwyn arnofio ar borthladdoedd maint SM (bach) neu ehangach
Cychwyn arnofio ar fannau gwylio maint MD (canolig) neu ehangach
Cychwyn arnofio ar olygfannau maint LG (mawr) neu ehangach
Cychwyn arnofio ar olygfannau maint XL (eithr-fawr) neu letach
<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>
Dyma'r holl ddosbarthiadau cefnogi:
.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none
Sass
Utilities API
Mae cyfleustodau arnofio yn cael eu datgan yn ein API cyfleustodau yn scss/_utilities.scss
. Dysgwch sut i ddefnyddio'r API cyfleustodau.
"float": (
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
),