Source

شناور

با استفاده از ابزارهای شناور پاسخگو، شناورها را روی هر عنصر، در هر نقطه شکست، تغییر دهید.

بررسی اجمالی

این کلاس‌های کاربردی یک عنصر را به چپ یا راست شناور می‌کنند یا شناور را بر اساس اندازه نمای فعلی با استفاده از ویژگی CSSfloat غیرفعال می‌کنند. !importantبرای جلوگیری از مسائل اختصاصی گنجانده شده است. اینها از نقطه های شکست یکسانی مانند سیستم شبکه ما استفاده می کنند.

کلاس ها

تغییر وضعیت شناور با کلاس:

شناور به سمت چپ در تمام اندازه های درگاه دید

روی تمام اندازه‌های درگاه دید شناور شوید

روی همه اندازه‌های درگاه دید شناور نشوید
<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