حذف تعويم المحتوى Clearfix في إطار العمل Bootstrap
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
استخدم الصنف .clearfix الذي يقدّمه إطار العمل Bootstrap لحذف تعويم المحتوى داخل حاويّة.
يُضاف الصنف .clearfix إلى العنصُر الأب لإلغاء تأثير الخاصيّة float. يمكن استخدامه بصيغة مخلوط Sass.
<div class="clearfix">...</div>
// تعريف المخلوط
@mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}
// استخدام المخلوط
.element {
@include clearfix;
}
يوضّح المثال التالي استخدام الأداة Clearfix. يؤدّي عدم استخدام .clearfix في المثال إلى عدم تمدّد عنصُر <div> المغلِّف حول الزرّيْن، ممّا ينتُج عنه مُخطَّط غير سلس.
<div class="bg-info clearfix">
<button type="button" class="btn btn-secondary float-left">مثال على زرّ عائم إلى اليسار</button>
<button type="button" class="btn btn-secondary float-right">مثال على زرّ عائم إلى اليمين</button>
</div>