غوټۍ
ګټرونه ستاسو د کالمونو تر مینځ پیډینګ دي، چې د بوټسټریپ گرډ سیسټم کې د ځای او مینځپانګې تنظیم کولو لپاره کارول کیږي.
دوی څنګه کار کوي
-
ګټرونه د کالم مینځپانګې ترمینځ تشې دي چې د افقی لخوا رامینځته شوي
padding
. موږ په هر کالم کې تنظیم کوو ،padding-right
او د مینځپانګې د تنظیم کولو لپاره د هر قطار په پیل او پای کې د بندولوpadding-left
لپاره منفي کاروو .margin
-
ګترونه په
1.5rem
(24px
) پراخه پیل کیږي. دا موږ ته اجازه راکوي چې زموږ گرډ د پیډینګ او مارجین سپیسر پیمان سره مل کړو. -
ګټرونه په ځواب ویونکي ډول تنظیم کیدی شي. د افقی ګټرونو، عمودی ګټرونو، او ټولو ګټرونو ترمیمولو لپاره د وقفې نقطې ځانګړي ګټر ټولګي وکاروئ.
افقی ګیټرز
.gx-*
ټولګي د افقی ګټر عرض کنټرول لپاره کارول کیدی شي. .container
یا والدین ممکن د .container-fluid
سمون کولو ته اړتیا ولري که چیرې لوی ګټرونه هم وکارول شي ترڅو د ناغوښتل شوي جریان څخه مخنیوی وشي ، د مطابقت لرونکي پیډینګ افادیت په کارولو سره. د مثال په توګه، په لاندې مثال کې موږ پیډینګ د دې سره زیات کړی دی .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>
ګترونه بدل کړئ
ټولګي د ساس نقشې څخه جوړ شوي $gutters
کوم چې د ساس نقشې څخه په میراث شوي $spacers
.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);