گٹر

گٹر آپ کے کالموں کے درمیان پیڈنگ ہیں، جو بوٹسٹریپ گرڈ سسٹم میں مواد کو جوابی طور پر جگہ اور سیدھ میں لانے کے لیے استعمال ہوتے ہیں۔

اس صفحہ پر

وہ کیسے کام کرتے ہیں۔

گٹر کالم کے مواد کے درمیان خلاء ہیں، جو افقی کے ذریعہ بنائے گئے ہیں padding۔ ہم ہر کالم پر padding-rightاور سیٹ کرتے ہیں، اور مواد کو سیدھ میں لانے کے لیے ہر قطار کے شروع اور آخر میں اسے آفسیٹ کرنے کے لیے padding-leftمنفی کا استعمال کرتے ہیں ۔margin
1.5remگٹر ( 24px) چوڑے سے شروع ہوتے ہیں ۔ یہ ہمیں اپنے گرڈ کو پیڈنگ اور مارجن اسپیسرز اسکیل سے ملانے کی اجازت دیتا ہے۔
گٹروں کو جوابی طور پر ایڈجسٹ کیا جاسکتا ہے۔ افقی گٹروں، عمودی گٹروں، اور تمام گٹروں کو تبدیل کرنے کے لیے بریک پوائنٹ کے لیے مخصوص گٹر کلاسز کا استعمال کریں۔

افقی گٹر

.gx-*افقی گٹر کی چوڑائی کو کنٹرول کرنے کے لیے کلاسز کا استعمال کیا جا سکتا ہے۔ .containerیا والدین کو .container-fluidایڈجسٹ کرنے کی ضرورت ہو سکتی ہے اگر بڑے گٹروں کو بھی غیر مطلوبہ اوور فلو سے بچنے کے لیے، میچنگ پیڈنگ یوٹیلیٹی کا استعمال کرتے ہوئے استعمال کیا جائے۔ مثال کے طور پر، مندرجہ ذیل مثال میں ہم نے پیڈنگ کو اس کے ساتھ بڑھایا ہے .px-4:

حسب ضرورت کالم پیڈنگ

html

<div class="container px-4 text-center">
  <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

حسب ضرورت کالم پیڈنگ

html

<div class="container overflow-hidden text-center">
  <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

حسب ضرورت کالم پیڈنگ

html

<div class="container overflow-hidden text-center">
  <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کلاسز کو افقی گٹر کی چوڑائی کو کنٹرول کرنے کے لیے استعمال کیا جا سکتا ہے، درج ذیل مثال کے لیے ہم گٹر کی چوڑائی چھوٹی استعمال کرتے ہیں، اس لیے ریپر کلاس کو شامل کرنے کی ضرورت نہیں پڑے گی ۔

حسب ضرورت کالم پیڈنگ

html

<div class="container text-center">
  <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>

قطار کے کالم گٹر

گٹر کلاسز کو قطار کے کالموں میں بھی شامل کیا جا سکتا ہے ۔ درج ذیل مثال میں، ہم جوابی قطار کے کالم اور جوابی گٹر کلاسز استعمال کرتے ہیں۔

قطار کے کالم

html

<div class="container text-center">
  <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۔ یہ تمام فوری بچوں کے کالموں سے منفی margins .rowاور افقی کو ہٹا دیتا ہے۔padding

ایک کنارے سے کنارے ڈیزائن کی ضرورت ہے؟ اوور فلو کو روکنے کے لیے والدین کو گرا دیں .containerیا .container-fluidاور میں شامل کریں ۔.mx-0.row

عملی طور پر، یہ کیسا لگتا ہے۔ نوٹ کریں کہ آپ اسے دیگر تمام پہلے سے طے شدہ گرڈ کلاسز کے ساتھ استعمال کرنا جاری رکھ سکتے ہیں (بشمول کالم کی چوڑائی، ریسپانسیو ٹائرز، ری آرڈرز اور مزید)۔

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

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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,
);