मुख्य सामग्रीमा जानुहोस् कागजात नेभिगेसनमा जानुहोस्
Check
in English

फ्लोट

हाम्रो प्रतिक्रियाशील फ्लोट उपयोगिताहरू प्रयोग गरेर कुनै पनि तत्वमा, कुनै पनि ब्रेकपोइन्टमा फ्लोटहरू टगल गर्नुहोस्।

यस पृष्ठमा

अवलोकन

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

सबै भ्यूपोर्ट आकारहरूमा फ्लोट सुरु

सबै भ्यूपोर्ट आकारहरूमा फ्लोट अन्त्य

सबै भ्यूपोर्ट साइजहरूमा फ्लोट नगर्नुहोस्
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

सास

उपयोगिता API

फ्लोट उपयोगिताहरू हाम्रो उपयोगिता API मा घोषणा गरिएको छ scss/_utilities.scssउपयोगिता API कसरी प्रयोग गर्ने जान्नुहोस्।

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