ഗട്ടറുകൾ
നിങ്ങളുടെ നിരകൾക്കിടയിലുള്ള പാഡിംഗാണ് ഗട്ടറുകൾ, ബൂട്ട്സ്ട്രാപ്പ് ഗ്രിഡ് സിസ്റ്റത്തിൽ പ്രതികരണാത്മകമായി ഇടം നൽകാനും ഉള്ളടക്കം വിന്യസിക്കാനും ഉപയോഗിക്കുന്നു.
അവർ എങ്ങനെ പ്രവർത്തിക്കുന്നു
-
തിരശ്ചീനമായി സൃഷ്ടിച്ച കോളം ഉള്ളടക്കങ്ങൾക്കിടയിലുള്ള വിടവുകളാണ് ഗട്ടറുകൾ
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,
);