Gutters

ئۆستەڭلەر سىزنىڭ ئىستونلىرىڭىز ئارىسىدىكى تاختا بولۇپ ، Bootstrap تورى سىستېمىسىدىكى ئىنكاسچان بوشلۇق ۋە مەزمۇنلارنى توغرىلاشقا ئىشلىتىلىدۇ.

بۇ بەتتە

ئۇلار قانداق ئىشلەيدۇ

ئۆستەڭ گورىزونتال ئارقىلىق ھاسىل قىلىنغان ستون مەزمۇنى ئوتتۇرىسىدىكى پەرق padding. بىز ھەر بىر ئىستونغا تەڭشەيمىز padding-rightۋە padding-leftسەلبىي marginئىشلىتىپ ، ھەر بىر قۇرنىڭ بېشى ۋە ئاخىرىدا مەزمۇننى توغرىلايمىز.
1.5remئۆستەڭ ( 24px) كەڭلىكتە باشلىنىدۇ . بۇ بىزنىڭ تورىمىزنى تاختا ۋە گىرۋەكلىك بوشلۇق بىلەن ماسلاشتۇرىدۇ .
ئۆستەڭلەرنى ئىنكاسچانلىق بىلەن تەڭشىگىلى بولىدۇ. بۆسۈش ئېغىزىغا خاس ئۆستەڭ سىنىپىدىن پايدىلىنىپ ، گورىزونتال ئۆستەڭ ، تىك ئۆستەڭ ۋە بارلىق ئۆستەڭلەرنى ئۆزگەرتىڭ.

گورىزونتال ئۆستەڭ

.gx-*دەرسلەرنى گورىزونتال ئۆستەڭنىڭ كەڭلىكىنى كونترول قىلىشقا ئىشلىتىشكە بولىدۇ. ماس كېلىدىغان تاختا ئىشلىتىش ئارقىلىق ، كېرەكسىز ئېقىپ كېتىشنىڭ ئالدىنى ئېلىش ئۈچۈن چوڭراق ئۆستەڭلەرمۇ ئىشلىتىلسە ، ئاتا-ئانىلار ياكى ئاتا-ئانىلار تەڭشىلىشى مۇمكىن .container. .container-fluidمەسىلەن ، تۆۋەندىكى مىسالدا بىز padding نى كۆپەيتتۇق .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ئېقىپ كېتىشنىڭ ئالدىنى ئالىدۇ.

ئەمەلىيەتتە ، ئۇ قانداق كۆرۈنىدۇ. شۇنىڭغا دىققەت قىلىڭكى ، سىز باشقا ئالدىن بېكىتىلگەن تور سىنىپلىرى بىلەن داۋاملىق ئىشلىتەلەيسىز (ستون كەڭلىكى ، ئىنكاس دەرىجىسى ، رەت تەرتىپى ۋە باشقىلارنى ئۆز ئىچىگە ئالىدۇ).

.col-sm-6 .col-md-8

.col-6 .col-md-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,
);