פוסט זה ידון במה הם חללי מרזבים וכיצד ניתן להסירם עבור div ספציפי ב-Bootstrap.
מהו Gutter Space ב-Bootstrap?
המרזבים הם הרווחים או הרווחים בין העמודים המיוצרים בריפוד אופקי. הם משמשים לתמיכה ביישור תוכן רספונסיבי ורווחים במערכת Bootstrap grid.
מתחת לתמונה נתונה שורה עם גבול אדום סביבה. בתוך השורה, קיימים שלושה רכיבי div שווים בגודלם של עמודות רשת שוות. למרות שהעמודים שווים, עדיין יש ביניהם מרווחי מרזבים:
כיצד להסיר שטח מרזב עבור div ספציפי ב-Bootstrap?
ב-Bootstrap, הכיתה ' ללא מרזבים 'מנוצל כדי לחסל את מרווחי המרזבים של כל div.
למטרה זו:
- הוסף ' 'תייג יחד עם הכיתה' ראשי-div '.
- לאחר מכן, התאם קטע שורה על ידי הוספת עוד '
' אלמנט עם המחלקה ' שׁוּרָה '. מכיוון שעלינו להסיר את הרווחים מהשורה, ציין מחלקה ' ללא מרזבים ' בתוך זה.- כדי לחלק את שורת הרשת לשלוש עמודות שוות, השתמש במחלקה ' col-4 '.
- בתוך המיכל '
' של כל עמודה, התאם את האלמנטים '' עם מחלקות ' עמודה-1 ', ' עמודה-2 ', ו' עמודה-3 ', בהתאמה: < div מעמד = 'דייוו הראשי' >
< div מעמד = 'שורה ללא מרזבים' >
< div מעמד = 'קול-4' >
< div מעמד = 'עמודה-1' >< / div >
< / div >
< div מעמד = 'קול-4' >
< div מעמד = 'עמודה-2' >< / div >
< / div >
< div מעמד = 'קול-4' >
< div מעמד = 'עמודה 3' >< / div >
< / div >
< / div >
< / div >CSS
בסעיף CSS, השיעורים המוזכרים בדף HTML מעוצבים עם מספר מאפייני סטיילינג.
כיתת 'main-div' בסגנון
.main-div {
רוֹחַב : 600px;
שוליים: 50px אוטומטי;
}ה ' .main-div ' מוזכר כדי לגשת לרכיב div שיש לו מחלקה ' ראשי-div '. המאפיינים הבאים מוחלים על מחלקה זו:
- ' רוֹחַב ' מגדיר את רוחב האלמנט.
- ' שולים ' מגדיר את המרווח סביב האלמנט.
שיעור 'שורה' בסגנון
.שׁוּרָה {
גבול : 1px אדום מלא;
}The Bootstrap' שׁוּרָה ' מחלקה מתווספת עם ' גבול ' תכונה. פעולה זו תעטוף את שורת הרשת בגבול רוחב, סגנון וצבע מוגדרים.
שלושת הכיתות' עמודה-1 ', ' עמודה-2 ', ו' עמודה-3 ' מוקצה ה-CSS ' צבע רקע ' ו' גוֹבַה ' מאפיינים כדי להפוך אותם לבולטים.
מחלקה בסגנון 'עמודה-1'.
.טור- אחד {
רקע כללי- צֶבַע : טורקיז;
גוֹבַה : 200px;
}סגנון 'עמודה-2'.
.טור- 2 {
רקע כללי- צֶבַע : סגול;
גוֹבַה : 200px;
}מחלקה בסגנון 'עמודה-3'.
.טור- 3 {
רקע כללי- צֶבַע : צהוב ירוק;
גוֹבַה : 200px;
}ניתן להבחין כי '
'מיכל עם הכיתה' שׁוּרָה ' הותאם בהצלחה ללא רווח ביניים ביניהם:
לימדנו אותך כיצד להסיר שטח מרזב עבור div ספציפי ב-Bootstrap.
סיכום
כדי להסיר רווחי ביוב עבור div ספציפי, הכיתה ' ללא מרזבים ' יכול לשמש. לשם כך, הוסף את '
אלמנט ' יחד עם ' שורה ללא מרזבים ' מעמד. פוסט זה סיפק מדריך מקיף על חללי מרזבים וכיצד ניתן לבטל אותם עבור div ספציפי ב-Bootstrap. - לאחר מכן, התאם קטע שורה על ידי הוספת עוד '