Чуйборхо

Гуттерҳо ҷойгоҳи байни сутунҳои шумо мебошанд, ки барои ба таври дақиқ ҷой додан ва ҳамоҳангсозии мундариҷа дар системаи шабакаи Bootstrap истифода мешаванд.

Дар ин саҳифа

Чӣ тавр онҳо кор мекунанд

Гуттерҳо фосилаҳои байни мундариҷаи сутун мебошанд, ки тавассути уфуқӣ сохта шудаанд padding. Мо padding-rightва padding-leftдар ҳар як сутун муқаррар мекунем ва манфиро marginбарои ҷуброн кардани он дар аввал ва охири ҳар як сатр барои мувофиқ кардани мундариҷа истифода мебарем.
Чуйборхо аз 1.5rem( 24px) васеъ сар мешаванд. Ин ба мо имкон медиҳад, ки шабакаи худро ба миқёси padding ва spacers spacers мувофиқ созем .
Ҷӯйборҳоро ба таври дақиқ танзим кардан мумкин аст. Барои тағир додани ҷӯйборҳои уфуқӣ, ҷӯйборҳои амудӣ ва ҳама ҷӯйборҳо синфҳои мушаххаси ҷӯйборро истифода баред.

Чӯҷаҳои уфуқӣ

.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. marginИн s манфиро аз .rowва уфуқӣ paddingаз ҳама сутунҳои кӯдаконаи фаврӣ хориҷ мекунад.

Ба тарроҳии канор ба канор ниёз доред? Падару модарро партоед .containerё .container-fluid.

Дар амал, ин аст, ки он чӣ гуна ба назар мерасад. Аҳамият диҳед, ки шумо метавонед онро бо ҳама синфҳои қаблан муайяншудаи шабака истифода баред (аз ҷумла паҳнои сутунҳо, сатҳҳои ҷавобӣ, фармоишҳои такрорӣ ва ғайра).

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

.кол-6 .кол-мд-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>

Ҷойгирҳоро иваз кунед

Синфҳо аз харитаи Sass сохта шудаанд, ки аз $guttersхаритаи Sass мерос гирифта $spacersшудаанд.

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