تباعد

يتضمن Bootstrap نطاقًا واسعًا من فئات أدوات الهامش المستجيبة للاختزال والحشو لتعديل مظهر العنصر.

كيف تعمل

marginقم بتعيين قيم أو صديقة سريعة الاستجابة paddingلعنصر أو مجموعة فرعية من جوانبها بفئات الاختزال. يتضمن دعمًا للخصائص الفردية وجميع الخصائص والخصائص الرأسية والأفقية. يتم إنشاء الفئات من خريطة Sass افتراضية تتراوح من .25remإلى 3rem.

الرموز

أدوات التباعد التي تنطبق على جميع نقاط التوقف ، من xsإلى xl، ليس بها اختصار لنقطة التوقف. هذا لأن هذه الفئات يتم تطبيقها من min-width: 0وإلى الأعلى ، وبالتالي فهي غير ملزمة باستعلام وسائط. ومع ذلك ، تتضمن نقاط التوقف المتبقية اختصارًا لنقطة التوقف.

تتم تسمية الفئات باستخدام التنسيق من {property}{sides}-{size}أجل xsو و و و .{property}{sides}-{breakpoint}-{size}smmdlgxl

حيث تكون الملكية واحدة من:

• 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>