Source

ათწილადი

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

მიმოხილვა

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

კლასები

float-ის გადართვა კლასით:

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

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

არ დაცუროთ ყველა ხედის ზომაზე
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

მიქსინები

ან Sass mixin-ით:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

საპასუხო

საპასუხო ვარიაციები ასევე არსებობს თითოეული floatმნიშვნელობისთვის.

მოძრავი მარცხნივ SM (პატარა) ან უფრო ფართო ხედებზე

მოძრავი მარცხნივ MD (საშუალო) ან უფრო ფართო ხედებზე

მოძრავი მარცხნივ LG (დიდი) ან უფრო ფართო ხედების პორტებზე

მოძრავი მარცხნივ XL (ზედმეტად დიდი) ან უფრო ფართო ხედის პორტებზე

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

აქ არის ყველა დამხმარე კლასი;

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none