Source

Arnofio

Toglo fflotiau ar unrhyw elfen, ar draws unrhyw dorbwynt, gan ddefnyddio ein cyfleustodau arnofio ymatebol.

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.

Dosbarthiadau

Toglo fflôt gyda dosbarth:

Arnofio i'r chwith ar bob maint porth gwylio

Arnofio i'r dde ar bob maint golygfan

Peidiwch ag arnofio ar bob maint golygfan 
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

cymysgeddau

Neu gan Sass mixin:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

Ymatebol

Mae amrywiadau ymatebol hefyd yn bodoli ar gyfer pob floatgwerth.

Arnofio i'r chwith ar olygfannau maint SM (bach) neu lletach

Arnofio i'r chwith ar fannau gwylio maint MD (canolig) neu letach

Arnofio i'r chwith ar olygfannau maint LG (mawr) neu ehangach

Arnofio i'r chwith ar olygfannau maint XL (eithr-fawr) neu letach 

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

Dyma'r holl ddosbarthiadau cefnogi;

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none