גוטערס
גוטטערס זענען די וואַטן צווישן דיין שפאלטן, געניצט צו ריספּאַנסיוולי פּלאַץ און ייַנרייען אינהאַלט אין די Bootstrap גריד סיסטעם.
ווי זיי אַרבעטן
-
גוטערז זענען די גאַפּס צווישן זייַל אינהאַלט, באשאפן דורך האָריזאָנטאַל
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,
);