تباعد
يتضمن Bootstrap نطاقًا واسعًا من فئات أدوات الهامش المستجيبة للاختزال والحشو لتعديل مظهر العنصر.
كيف تعمل
margin
قم بتعيين قيم أو صديقة سريعة الاستجابة padding
لعنصر أو مجموعة فرعية من جوانبها بفئات الاختزال. يتضمن دعمًا للخصائص الفردية وجميع الخصائص والخصائص الرأسية والأفقية. يتم إنشاء الفئات من خريطة Sass افتراضية تتراوح من .25rem
إلى 3rem
.
الرموز
أدوات التباعد التي تنطبق على جميع نقاط التوقف ، من xs
إلى xl
، ليس بها اختصار لنقطة التوقف. هذا لأن هذه الفئات يتم تطبيقها من min-width: 0
وإلى الأعلى ، وبالتالي فهي غير ملزمة باستعلام وسائط. ومع ذلك ، تتضمن نقاط التوقف المتبقية اختصارًا لنقطة التوقف.
تتم تسمية الفئات باستخدام التنسيق من {property}{sides}-{size}
أجل xs
و و و و .{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
حيث تكون الملكية واحدة من:
m
- للفئات التي تم تعيينهاmargin
p
- للفئات التي تم تعيينهاpadding
حيث تكون الجوانب أحد:
t
- للفئات التي تحددmargin-top
أوpadding-top
b
- للفئات التي تحددmargin-bottom
أوpadding-bottom
l
- للفئات التي تحددmargin-left
أوpadding-left
r
- للفئات التي تحددmargin-right
أوpadding-right
x
- للفئات التي تحدد كلا من*-left
و*-right
y
- للفئات التي تحدد كلا من*-top
و*-bottom
- فارغ - للفئات التي تحدد a
margin
أوpadding
على جميع الجوانب الأربعة للعنصر
حيث الحجم هو واحد من:
0
- للفئات التي تلغيmargin
أوpadding
عن طريق ضبطها على0
1
- (افتراضيًا) للفئات التي تقوم بتعيينmargin
أوpadding
إلى$spacer * .25
2
- (افتراضيًا) للفئات التي تقوم بتعيينmargin
أوpadding
إلى$spacer * .5
3
- (افتراضيًا) للفئات التي تقوم بتعيينmargin
أوpadding
إلى$spacer
4
- (افتراضيًا) للفئات التي تقوم بتعيينmargin
أوpadding
إلى$spacer * 1.5
5
- (افتراضيًا) للفئات التي تقوم بتعيينmargin
أوpadding
إلى$spacer * 3
auto
- للفئات التي ضبطتmargin
على تلقائي
(يمكنك إضافة المزيد من الأحجام عن طريق إضافة إدخالات إلى $spacers
متغير خريطة Sass.)
أمثلة
فيما يلي بعض الأمثلة التمثيلية لهذه الفئات:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
التمركز الأفقي
بالإضافة إلى ذلك ، يتضمن Bootstrap أيضًا .mx-auto
فئة لتوسيط محتوى مستوى الكتلة بعرض ثابت أفقيًا - أي المحتوى الذي يحتوي display: block
على width
مجموعة - عن طريق تعيين الهوامش الأفقية على auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
الهامش السلبي
في CSS ، margin
يمكن للخصائص استخدام القيم السالبة ( padding
لا يمكن). اعتبارًا من 4.2 ، أضفنا أدوات مساعدة للهامش السالب لكل حجم عدد صحيح غير صفري مذكور أعلاه (على سبيل المثال ، 1
، 2
، ، 3
، 4
، 5
). هذه الأدوات المساعدة مثالية لتخصيص مزاريب أعمدة الشبكة عبر نقاط التوقف.
بناء الجملة هو نفسه تقريبا أدوات مساعدة الهامش الإيجابي الافتراضية ، ولكن مع إضافة n
قبل الحجم المطلوب. إليك مثال على فئة عكس ما .mt-1
يلي:
.mt-n1 {
margin-top: -0.25rem !important;
}
فيما يلي مثال على تخصيص شبكة Bootstrap عند md
نقطة الإيقاف المتوسطة () وما فوقها. لقد قمنا بزيادة .col
المساحة المتروكة .px-md-5
ثم واجهنا ذلك .mx-md-n5
على الوالد .row
.
<div class="row mx-md-n5">
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>