المزاريب
المزاريب هي الحشوة بين الأعمدة الخاصة بك ، وتستخدم لتوفير مساحة استجابة ومحاذاة المحتوى في نظام شبكة Bootstrap.
كيف هؤلاء يعملون
-
المزاريب هي الفجوات بين محتوى العمود ، التي تم إنشاؤها بواسطة أفقي
padding
. نقوم بتعيين كل عمودpadding-right
وعلىpadding-left
كل عمود ، واستخدام السلبيةmargin
لتعويض ذلك في بداية ونهاية كل صف لمحاذاة المحتوى. -
تبدأ المزاريب بعرض
1.5rem
( ).24px
هذا يسمح لنا بمطابقة شبكتنا مع مقياس الحشو والهامش . -
يمكن ضبط المزاريب بشكل متجاوب. استخدم فئات المزراب الخاصة بنقطة التوقف لتعديل المزاريب الأفقية والمزاريب الرأسية وجميع المزاريب.
المزاريب الأفقية
.gx-*
يمكن استخدام الفئات للتحكم في عرض الحضيض الأفقي. قد يحتاج الوالد .container
أو .container-fluid
الوالد إلى التعديل إذا تم استخدام مزاريب أكبر أيضًا لتجنب الفائض غير المرغوب فيه ، باستخدام أداة حشو مطابقة. على سبيل المثال ، في المثال التالي قمنا بزيادة المساحة المتروكة باستخدام .px-4
:
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
الحل البديل هو إضافة غلاف حول الفصل .row
مع .overflow-hidden
الفصل:
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
المزاريب العمودية
.gy-*
يمكن استخدام الفئات للتحكم في عرض الحضيض الرأسي. مثل المزاريب الأفقية ، يمكن أن تتسبب المزاريب الرأسية في حدوث بعض الفائض أسفل .row
نهاية الصفحة. في حالة حدوث ذلك ، يمكنك إضافة غلاف حول .row
الفصل .overflow-hidden
الدراسي:
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
المزاريب الأفقية والعمودية
.g-*
يمكن استخدام الفئات للتحكم في عرض الحضيض الأفقي ، في المثال التالي نستخدم عرض هامش أصغر ، لذلك لن تكون هناك حاجة لإضافة .overflow-hidden
فئة الغلاف.
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
أعمدة الصف المزاريب
يمكن أيضًا إضافة فئات التوثيق إلى أعمدة الصف . في المثال التالي ، نستخدم أعمدة الصفوف المتجاوبة وفئات التوثيق المستجيبة.
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>
لا المزاريب
يمكن إزالة المزاريب بين الأعمدة في فئات الشبكة المحددة مسبقًا باستخدام .g-0
. هذا يزيل margin
s السلبية من .row
والأفقي padding
من جميع الأعمدة الفرعية المباشرة.
هل تحتاج إلى تصميم من الحافة إلى الحافة؟ إسقاط الوالد .container
أو .container-fluid
.
في الممارسة العملية ، هذا هو الشكل الذي يبدو عليه. لاحظ أنه يمكنك الاستمرار في استخدام هذا مع جميع فئات الشبكة المحددة مسبقًا (بما في ذلك عروض الأعمدة والمستويات المتجاوبة وإعادة الترتيب والمزيد).
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
تغيير المزاريب
يتم إنشاء الفئات من $gutters
خريطة Sass الموروثة من $spacers
خريطة Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);