گٹر
گٹر آپ کے کالموں کے درمیان پیڈنگ ہیں، جو بوٹسٹریپ گرڈ سسٹم میں مواد کو جوابی طور پر جگہ اور سیدھ میں لانے کے لیے استعمال ہوتے ہیں۔
وہ کیسے کام کرتے ہیں۔
-
گٹر کالم کے مواد کے درمیان خلاء ہیں، جو افقی کے ذریعہ بنائے گئے ہیں
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,
);