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