گٽر
گٽرز توهان جي ڪالمن جي وچ ۾ پيڊنگ آهن، جوابي طور تي استعمال ٿيل آهن ۽ بوٽ اسٽريپ گرڊ سسٽم ۾ مواد کي ترتيب ڏيڻ لاء.
اهي ڪيئن ڪم ڪن ٿا
-
گٽر ڪالمن جي مواد جي وچ ۾ خال آهن، افقي طرفان ٺاهيل
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,
);