in English
Қалқымалы
Біздің жауап беретін қалқымалы утилиталарды пайдаланып, кез келген элементте, кез келген тоқтау нүктесінде қалтқыларды ауыстырып-қосыңыз.
Бұл бетте
Шолу
Бұл утилиталар сыныптары элементті солға немесе оңға жылжытады немесе CSS float
сипатын пайдаланып ағымдағы қарау терезесінің өлшеміне негізделген қалқымалыны өшіреді . !important
ерекшелік мәселелерін болдырмау үшін енгізілген. Олар біздің тор жүйесі сияқты бірдей көру портының тоқтау нүктелерін пайдаланады. Float утилиталарының икемді элементтерге әсер етпейтінін ескеріңіз.
Барлық көріністер өлшемдерінде қалқымалы бастау
Барлық көріністер өлшемдерінде қалқымалы соңы
Көру алаңының барлық өлшемдерінде қалқымаңыз
<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>
Жауапты
float
Әрбір мән үшін жауап беретін нұсқалар да бар .
SM (кіші) немесе кеңірек өлшемді көру порттарында қалқымалы бастау
Өлшемді MD (орташа) немесе кеңірек көру порттарында қалқымалы бастау
LG (үлкен) немесе кеңірек өлшемді көру порттарында қалқымалы бастау
XL (өте үлкен) немесе кеңірек өлшемді көру порттарында қалқымалы бастау
<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>
Мұнда барлық қолдау сабақтары берілген:
.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
Сасс
Utilities API
Float утилиталары біздің API утилиталарында жарияланғ��н scss/_utilities.scss
. API утилиталарын қалай пайдалану керектігін біліңіз.
"float": (
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
),