گٽر

گٽرز توهان جي ڪالمن جي وچ ۾ پيڊنگ آهن، جوابي طور تي استعمال ٿيل آهن ۽ بوٽ اسٽريپ گرڊ سسٽم ۾ مواد کي ترتيب ڏيڻ لاء.

هن صفحي تي

اهي ڪيئن ڪم ڪن ٿا

گٽر ڪالمن جي مواد جي وچ ۾ خال آهن، افقي طرفان ٺاهيل 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,
);