Чуйборхо
Гуттерҳо ҷойгоҳи байни сутунҳои шумо мебошанд, ки барои ба таври дақиқ ҷой додан ва ҳамоҳангсозии мундариҷа дар системаи шабакаи 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
.
Дар амал, ин аст, ки он чӣ гуна ба назар мерасад. Аҳамият диҳед, ки шумо метавонед онро бо ҳама синфҳои қаблан муайяншудаи шабака истифода баред (аз ҷумла паҳнои сутунҳо, сатҳҳои ҷавобӣ, фармоишҳои такрорӣ ва ғайра).
<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,
);