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