मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
Check
in English

तैरनाइ

कोनों तत्व पर, कोनों ब्रेकपॉइंट कें पार, हमर प्रतिक्रियाशील फ्लोट उपयोगिताक कें उपयोग करयत फ्लोट कें टॉगल करूं.

अवलोकन

इ उपयोगिता वर्गक कें CSS floatगुण कें उपयोग करयत वर्तमान व्यूपोर्ट आकार कें आधार पर, एकटा तत्व कें बायां या दायां तरफ फ्लोट करयत छै, या फ्लोटिंग कें अक्षम करयत छै . !importantविशिष्टता कें मुद्दा सं बचय कें लेल शामिल कैल गेल छै. ई सब वही व्यूपोर्ट ब्रेकपॉइंट के उपयोग करै छै जे हमरऽ ग्रिड सिस्टम छै । कृपया ध्यान राखब फ्लोट यूटिलिटीज के फ्लेक्स आइटम पर कोनो प्रभाव नै पड़ैत अछि।

सभ व्यूपोर्ट आकार पर फ्लोट शुरू करू

सब व्यूपोर्ट आकार पर फ्लोट एंड

सभ व्यूपोर्ट आकार पर फ्लोट नहि करू
एचटीएमएल
<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प्रत्येक मान कें लेल प्रतिक्रियाशील भिन्नता सेहो मौजूद छै .

एसएम (छोट) या चौड़ा आकारक व्यूपोर्ट पर फ्लोट शुरू करू

एमडी (मध्यम) या चौड़ा आकारक व्यूपोर्ट पर फ्लोट शुरू करू

एलजी (बड़का) या चौड़ा आकार के व्यूपोर्ट पर फ्लोट शुरू करू

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

सस्स

उपयोगिता एपीआई

फ्लोट उपयोगिता हमर उपयोगिता एपीआई मे घोषित कएल गेल अछि scss/_utilities.scss. उपयोगिता एपीआई क उपयोग करब सीखू।

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),