شناور

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

بررسی اجمالی

این کلاس‌های کاربردی یک عنصر را به چپ یا راست شناور می‌کنند یا شناور را بر اساس اندازه نمای فعلی با استفاده از ویژگی 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مقدار وجود دارد.

<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