גוטערס

גוטטערס זענען די וואַטן צווישן דיין שפאלטן, געניצט צו ריספּאַנסיוולי פּלאַץ און ייַנרייען אינהאַלט אין די Bootstrap גריד סיסטעם.

אויף דעם בלאַט

ווי זיי אַרבעטן

גוטערז זענען די גאַפּס צווישן זייַל אינהאַלט, באשאפן דורך האָריזאָנטאַל padding. מיר שטעלן padding-rightאון padding-leftאויף יעדער זייַל, און נוצן נעגאַטיוו marginצו אָפסעט אַז אין די אָנהייב און סוף פון יעדער רודערן צו ייַנרייען אינהאַלט.
גוטטערס אָנהייבן בייַ 1.5rem( 24px) ברייט. דאָס אַלאַוז אונדז צו גלייַכן אונדזער גריד צו די וואַטן און גרענעץ ספּייסערז וואָג.
גערטנער קענען זיין ריספּאַנסיוולי אַדזשאַסטיד. ניצן ברעאַקפּאָינט-ספּעציפיש געטער קלאסן צו מאָדיפיצירן האָריזאָנטאַל גאָטערז, ווערטיקאַל גאָוטערז און אַלע גאַטערז.

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

.gx-*קלאסן קענען ווערן גענוצט צו קאָנטראָלירן די האָריזאָנטאַל גערטנער ברייט. די .containerאָדער .container-fluidפאָטער קען זיין אַדזשאַסטיד אויב גרעסערע גאַטערז זענען אויך געניצט צו ויסמיידן אַנוואָנטיד לויפן, ניצן אַ וואָס ריכטן וואַטן נוצן. פֿאַר בייַשפּיל, אין די פאלגענדע ביישפּיל מיר האָבן געוואקסן די וואַטן מיט .px-4:

מנהג זייַל וואַטן

HTML

<div class="container px-4 text-center">
  <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קלאַס:

מנהג זייַל וואַטן

HTML

<div class="container overflow-hidden text-center">
  <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קלאַס:

מנהג זייַל וואַטן

HTML

<div class="container overflow-hidden text-center">
  <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ראַפּער קלאַס.

מנהג זייַל וואַטן

HTML

<div class="container text-center">
  <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>

רודערן שפאלטן געטער

גוטער קלאסן קענען אויך זיין מוסיף צו רודערן שפאלטן . אין די פאלגענדע בייַשפּיל, מיר נוצן אָפּרופיק רודערן שפאלטן און אָפּרופיק רער קלאסן.

רודערן זייַל

HTML

<div class="container text-center">
  <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און לייגן .mx-0צו די .rowצו פאַרמייַדן אָוווערפלאָו.

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

.קאָל-סמ-6 .קאָל-מד-8

.קאָל-6 .קאָל-מד-4

HTML

<div class="row g-0 text-center">
  <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>

טוישן די גאַטערז

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

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);