in English

Қалқымалы

Біздің жауап беретін қалқымалы утилиталарды пайдаланып, кез келген элементте, кез келген тоқтау нүктесінде қалтқыларды ауыстырып-қосыңыз.

Шолу

Бұл утилиталар сыныптары элементті солға немесе оңға жылжытады немесе CSS floatсипатын пайдаланып ағымдағы қарау терезесінің өлшеміне негізделген қалқымалыны өшіреді . !importantерекшелік мәселелерін болдырмау үшін енгізілген. Олар біздің тор жүйесі сияқты бірдей көру портының тоқтау нүктелерін пайдаланады. 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