Source

Բոց

Անջատեք լողացողները ցանկացած տարրի վրա, ցանկացած բեկման կետում՝ օգտագործելով մեր արձագանքող float կոմունալ ծառայությունները:

Ընդհանուր ակնարկ

Այս օգտակար դասերը տարրը տեղափոխում են ձախ կամ աջ, կամ անջատում են լողացողը՝ հիմնվելով տեսադաշտի ընթացիկ չափի վրա՝ օգտագործելով CSS floatհատկությունը : !importantներառված է կոնկրետության խնդիրներից խուսափելու համար: Դրանք օգտագործում են նույն տեսադաշտի ընդմիջման կետերը, ինչ մեր ցանցային համակարգը: Խնդրում ենք տեղյակ լինել, որ float կոմունալ ծառայությունները չեն ազդում ֆլեքս տարրերի վրա:

Դասեր

Փոխարկել float դասի հետ՝

Լողացեք ձախ տեսադաշտի բոլոր չափերի վրա

Լողալ անմիջապես բոլոր տեսադաշտերի չափերի վրա

Մի լողացեք տեսադաշտի բոլոր չափերի վրա
<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>

Միքսիններ

Կամ Sass mixin-ի կողմից.

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

Պատասխանատու

Պատասխանատու տատանումներ կան նաև յուրաքանչյուր floatարժեքի համար:

Բոց թողեք SM (փոքր) կամ ավելի լայն տեսադաշտերի վրա

Լողացեք MD (միջին) կամ ավելի լայն տեսադաշտերի վրա

Լողացեք LG (մեծ) կամ ավելի լայն տեսադաշտերի վրա

Լողացեք ձախ XL (չափազանց մեծ) կամ ավելի լայն տեսադաշտերի վրա

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

Ահա բոլոր աջակցության դասերը.

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