ਗਟਰਸ

ਗਟਰ ਤੁਹਾਡੇ ਕਾਲਮਾਂ ਦੇ ਵਿਚਕਾਰ ਪੈਡਿੰਗ ਹਨ, ਜੋ ਕਿ ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ ਵਿੱਚ ਸਮਗਰੀ ਨੂੰ ਜਵਾਬਦੇਹ ਤੌਰ 'ਤੇ ਸਪੇਸ ਅਤੇ ਅਲਾਈਨ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਉਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ

ਗਟਰ ਕਾਲਮ ਸਮਗਰੀ ਦੇ ਵਿਚਕਾਰਲੇ ਪਾੜੇ ਹਨ, ਜੋ ਹਰੀਜੱਟਲ ਦੁਆਰਾ ਬਣਾਏ ਗਏ ਹਨ 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। ਇਹ ਸਾਰੇ ਤਤਕਾਲ ਚਿਲਡਰਨ ਕਾਲਮਾਂ marginਤੋਂ ਨੈਗੇਟਿਵ .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,
);