გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

ათწილადი

ჩართეთ floats ნებისმიერ ელემენტზე, ნებისმიერ წყვეტის წერტილში, ჩვენი საპასუხო float უტილიტების გამოყენებით.

მიმოხილვა

ეს უტილიტა კლასები ცურავს ელემენტს მარცხნივ ან მარჯვნივ, ან გამორთავს ცურვას, მიმდინარე ხედის ზომის მიხედვით, CSS floatთვისების გამოყენებით . !importantშედის სპეციფიკური საკითხების თავიდან ასაცილებლად. ისინი იყენებენ იმავე ხედვის წერტილებს, როგორც ჩვენი ბადის სისტემა. გთხოვთ გაითვალისწინოთ, რომ float უტილიტას არავითარი გავლენა არ აქვს flex ელემენტებზე.

Float start ყველა ხედის ზომაზე

მცურავი დასასრული ხედის ყველა ზომაზე

არ დაცუროთ ყველა ხედის ზომაზე
<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მნიშვნელობისთვის.

Float იწყება SM (პატარა) ან უფრო ფართო ხედების პორტებზე

Float იწყება 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 უტილიტები გამოცხადებულია ჩვენს Utilities API-ში scss/_utilities.scss. ისწავლეთ როგორ გამოიყენოთ Utilities API.

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