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 . !importantyn 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

html

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

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

html

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

.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,
      )
    ),