Негізгі мазмұнға өту Құжаттар шарлауына өту
Check
in English

Қалқымалы

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

Бұл бетте

Шолу

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

Барлық көріністер өлшемдерінде қалқымалы бастау

Барлық көріністер өлшемдерінде қалқымалы соңы

Көру алаңының барлық өлшемдерінде қалқымаңыз
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>

Жауапты

floatӘрбір мән үшін жауап беретін нұсқалар да бар .

SM (кіші) немесе кеңірек өлшемді көру порттарында қалқымалы бастау

Өлшемді MD (орташа) немесе кеңірек көру порттарында қалқымалы бастау

LG (үлкен) немесе кеңірек өлшемді көру порттарында қалқымалы бастау

XL (өте үлкен) немесе кеңірек өлшемді көру порттарында қалқымалы бастау

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>

Мұнда барлық қолдау сабақтары берілген:

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