ספּייסינג

באָאָטסטראַפּ כולל אַ ברייט קייט פון סטענאָגראַפיע אָפּרופיק גרענעץ און וואַטן נוצן קלאסן צו מאָדיפיצירן די אויסזען פון אַן עלעמענט.

וויאזוי עס ארבעט

באַשטימען אָפּרופיק-פרייַנדלעך marginאָדער paddingוואַלועס צו אַן עלעמענט אָדער אַ סאַבסעט פון זייַן זייטן מיט סטענאָגראַפיע קלאסן. כולל שטיצן פֿאַר יחיד פּראָפּערטיעס, אַלע פּראָפּערטיעס און ווערטיקאַל און האָריזאָנטאַל פּראָפּערטיעס. קלאסן זענען געבויט פון אַ פעליקייַט סאַס מאַפּע ריינדזשינג פון .25remצו 3rem.

נאָטאַציע

ספּייסינג יוטילאַטיז וואָס אַפּלייז צו אַלע ברייקפּאָינץ, פֿון xsצו xl, האָבן קיין ברייקפּאָינט אַבריווייישאַן אין זיי. דאָס איז ווייַל די קלאסן זענען געווענדט פֿון min-width: 0און אַרויף, און אַזוי זענען נישט געבונדן דורך אַ מידיאַ אָנפֿרעג. די רוען ברייקפּאָינץ, אָבער, טאָן אַרייַננעמען אַ ברייקפּאָינט אַבריווייישאַן.

די קלאסן זענען געהייסן מיט די פֿאָרמאַט {property}{sides}-{size}פֿאַר xsאון {property}{sides}-{breakpoint}-{size}פֿאַר sm, md, lg, און xl.

ווו פאַרמאָג איז איינער פון:

• m- פֿאַר קלאסן וואָס שטעלןmargin
• p- פֿאַר קלאסן וואָס שטעלןpadding

וואו זייטן איז איינער פון:

• t- פֿאַר קלאסן וואָס שטעלן margin-topאָדערpadding-top
• b- פֿאַר קלאסן וואָס שטעלן margin-bottomאָדערpadding-bottom
• l- פֿאַר קלאסן וואָס שטעלן margin-leftאָדערpadding-left
• r- פֿאַר קלאסן וואָס שטעלן margin-rightאָדערpadding-right
• x- פֿאַר קלאסן וואָס שטעלן ביידע *-leftאון*-right
• y- פֿאַר קלאסן וואָס שטעלן ביידע *-topאון*-bottom
• ליידיק - פֿאַר קלאסן וואָס שטעלן אַ marginאָדער paddingאויף אַלע 4 זייטן פון די עלעמענט

ווו די גרייס איז איינער פון:

• 0- פֿאַר קלאסן וואָס עלימינירן די marginאָדער paddingדורך באַשטעטיקן עס0
• 1- (דורך פעליקייַט) פֿאַר קלאסן וואָס שטעלן די marginאָדער paddingצו$spacer * .25
• 2- (דורך פעליקייַט) פֿאַר קלאסן וואָס שטעלן די marginאָדער paddingצו$spacer * .5
• 3- (דורך פעליקייַט) פֿאַר קלאסן וואָס שטעלן די marginאָדער paddingצו$spacer
• 4- (דורך פעליקייַט) פֿאַר קלאסן וואָס שטעלן די marginאָדער paddingצו$spacer * 1.5
• 5- (דורך פעליקייַט) פֿאַר קלאסן וואָס שטעלן די marginאָדער paddingצו$spacer * 3
• auto- פֿאַר קלאסן וואָס שטעלן די marginצו אַוטאָ

(איר קענען לייגן מער סיזעס דורך אַדינג איינסן צו די $spacersSass מאַפּע בייַטעוודיק.)

ביישפילן

דאָ זענען עטלעכע רעפּריזענאַטיוו ביישפילן פון די קלאסן:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

האָריזאָנטאַל סענטערינג

אַדישנאַלי, Bootstrap אויך ינקלודז אַ .mx-autoקלאַס פֿאַר כאָריזאַנטאַלי סענטערינג פאַרפעסטיקט-ברייט בלאָק מדרגה אינהאַלט - דאָס איז אינהאַלט וואָס האט display: blockאון אַ widthגאַנג - דורך באַשטעטיקן די האָריזאָנטאַל מאַרדזשאַנז צו auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

נעגאַטיוו גרענעץ

אין CSS, marginפּראָפּערטיעס קענען נוצן נעגאַטיוו וואַלועס ( paddingקענען נישט). זינט 4.2, מיר האָבן צוגעלייגט נעגאַטיוו גרענעץ יוטילאַטיז פֿאַר יעדער ניט-נול גאַנץ נומער גרייס ליסטעד אויבן (למשל, 1, 2, 3, 4, 5). די יוטילאַטיז זענען ידעאַל פֿאַר קאַסטאַמייזינג גריד זייַל גאָוטערז אַריבער ברייקפּאָינץ.

די סינטאַקס איז כּמעט די זעלבע ווי די פעליקייַט, positive גרענעץ יוטילאַטיז, אָבער מיט די אַדישאַן פון nאיידער די געבעטן גרייס. דאָ ס אַ בייַשפּיל קלאַס וואָס איז די פאַרקערט פון .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

דאָ איז אַ ביישפּיל פון קאַסטאַמייזינג די באָאָצטראַפּ גריד אין די מיטל ( md) ברייקפּוינט און העכער. מיר האָבן געוואקסן די .colוואַטן מיט .px-md-5און דעמאָלט אַנטקעגנשטעלנ דעם מיט .mx-md-n5אויף די פאָטער .row.

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>