ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش
in English

Gutters

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

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

  • ئۆستەڭ بولسا توغرىسىغا ھاسىل قىلىنغان ستون مەزمۇنى ئوتتۇرىسىدىكى پەرق padding. بىز ھەر بىر ئىستونغا تەڭشەيمىز padding-rightۋە padding-leftسەلبىي marginئىشلىتىپ ھەر بىر قۇرنىڭ بېشى ۋە ئاخىرىدا مەزمۇننى توغرىلايمىز.

  • 1.5remئۆستەڭ ( 24px) كەڭلىكتە باشلىنىدۇ . بۇ بىزنىڭ تورىمىزنى تاختا ۋە گىرۋەكلىك بوشلۇق بىلەن ماسلاشتۇرىدۇ .

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

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

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

قىرغاقتىن لايىھىلەش كېرەكمۇ؟ ئاتا-ئانىسىنى تاشلاڭ .containerياكى .container-fluid.

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

.col-sm-6 .col-md-8
.col-6 .col-md-4
<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>

ئۆستەڭنى ئۆزگەرتىڭ

دەرسلەر $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,
);