المزاريب

المزاريب هي الحشوة بين الأعمدة الخاصة بك ، وتستخدم لتوفير مساحة استجابة ومحاذاة المحتوى في نظام شبكة Bootstrap.

على هذه الصفحة

كيف هؤلاء يعملون

المزاريب هي الفجوات بين محتوى العمود ، التي تم إنشاؤها بواسطة أفقي padding. نقوم بتعيين كل عمود padding-rightوعلى padding-leftكل عمود ، واستخدام السلبية marginلتعويض ذلك في بداية ونهاية كل صف لمحاذاة المحتوى.
تبدأ المزاريب بعرض 1.5rem( ). 24pxهذا يسمح لنا بمطابقة شبكتنا مع مقياس الحشو والهامش .
يمكن ضبط المزاريب بشكل متجاوب. استخدم فئات المزراب الخاصة بنقطة التوقف لتعديل المزاريب الأفقية والمزاريب الرأسية وجميع المزاريب.

المزاريب الأفقية

.gx-*يمكن استخدام الفئات للتحكم في عرض الحضيض الأفقي. قد يحتاج الوالد .containerأو .container-fluidالوالد إلى التعديل إذا تم استخدام مزاريب أكبر أيضًا لتجنب الفائض غير المرغوب فيه ، باستخدام أداة حشو مطابقة. على سبيل المثال ، في المثال التالي قمنا بزيادة المساحة المتروكة باستخدام .px-4:

مساحة أعمدة مخصصة

لغة البرمجة

<div class="container px-4 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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. هذا يزيل margins السلبية من .rowوالأفقي paddingمن جميع الأعمدة الفرعية المباشرة.

هل تحتاج إلى تصميم من الحافة إلى الحافة؟ أسقط الوالد .containerأو .container-fluidأضفه .mx-0إلى .rowلمنع الفائض.

في الممارسة العملية ، هذا هو الشكل الذي يبدو عليه. لاحظ أنه يمكنك الاستمرار في استخدام هذا مع جميع فئات الشبكة المحددة مسبقًا (بما في ذلك عروض الأعمدة والمستويات المتجاوبة وإعادة الترتيب والمزيد).

.col-sm-6 .col-md-8

.col-6 .col-md-4

لغة البرمجة

<div class="row g-0 text-center">
  <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,
);