الفرق بين المراجعتين ل"Bootstrap/clearfix"
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
سطر 28: | سطر 28: | ||
== مصادر == | == مصادر == | ||
− | * [https://getbootstrap.com/docs/4. | + | * [https://getbootstrap.com/docs/4.5/utilities/clearfix/ صفحة في Clearfix توثيق Bootstrap]. |
المراجعة الحالية بتاريخ 06:53، 14 يوليو 2020
استخدم الصنف .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>