דלג לתוכן הראשי דלג לניווט במסמכים
in English

מרזבים

מרזבים הם הריפוד בין העמודות שלך, המשמשים לרווח וליישור תוכן באופן רספונסיבי במערכת 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,
);