מרזבים

מרזבים הם הריפוד בין העמודות שלך, המשמשים לרווח וליישור תוכן באופן רספונסיבי במערכת Bootstrap grid.

בעמוד זה

איך הם עובדים

מרזבים הם הפערים בין תוכן העמודות, שנוצרו על ידי אופקי 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. זה מסיר את ה- margins השליליים מהעמודות .rowהאופקיות paddingמכל עמודות הילדים המיידיות.

זקוק לעיצוב מקצה לקצה? זרוק את ההורה .containerאו .container-fluid.

בפועל, כך זה נראה. שים לב שאתה יכול להמשיך להשתמש בזה עם כל שאר מחלקות הרשת המוגדרות מראש (כולל רוחבי עמודות, שכבות תגובה, הזמנות מחדש ועוד).

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

.col-6 .col-md-4

<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,
);